使用setInterval()代替循环的替代方案

Question

我希望能够在延迟的情况下连续迭代数组。在下面的示例中，我使用了setInterval()。它可以正常工作，但是我想知道有没有更好的方法来实现这个功能？

---

var message = "Lorem ipsum dolor sit amet";
var print = message.split(" ");


var iterateOverMsg = function(arr) {
    $('p').hide().append(arr[0]).fadeIn(3000).fadeOut(2000);
    var i = 1;
    setInterval(function() {
        $('p').hide().text(arr[i]).fadeIn(3000).fadeOut(2000);
        i++;
        if (i >= arr.length) {
            i = 0;
        }
    }, 5000);
}(print);

---

https://jsfiddle.net/Tzaru/94oym3yn/

- Tzaru

---

我投票关闭此问题，因为该问题正在寻求优化/改进，而CodeReviews是正确的门户网站。 - Rajesh

你可以尝试使用 i = (i+1)% arr.length 替代 i++; if (i >= arr.length) { i=0 }。另外，对于 fadeIn(3000).fadeOut(2000)，不确定是否应该在回调函数中将 fadeOut 调用？ - Rajesh

您可以使用 HTML5 动画和过渡事件来实现此功能：请参见 'ontransitionend' 和 'onanimationend'。 - Niels

setInterval是一个函数，它每隔一定的毫秒执行一段代码，这正是您想要实现的，为什么要改变它呢？您也可以使用setTimeout来实现间隔，但我不明白这样做的意义。 - Dima Gimburg

Answer 1

你可以通过以下几种方式来改进这个问题。首先，你可以使用模运算符将递增的数字“包裹”在数组中，而不需要检测它是否超出了数组的边界。其次，你可以使用递归来无限循环遍历数组。最后，你可以使用 setTimeout() 来确保时间同步。试试这个方法：

var print = "Lorem ipsum dolor sit amet".split(" ");

function iterateOverMsg(arr, i) {
  $('p').hide().text(arr[i % arr.length]).fadeIn(3000).fadeOut(2000);
  setTimeout(iterateOverMsg.bind(this, arr, ++i), 5000);
}
iterateOverMsg(print, 0);

.dynamicText {
  font-size: 3em;
  text-align: center;
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="dynamicText"></p>

- Rory McCrossan

---

嗨，Rory，你的重构做得很好。感谢你提供这个好建议。 - Tzaru