javascript - 使用 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/

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>