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>

使用setInterval（）替换循环

1 个答案: