Question

我想遍历一个数组并单独显示每个元素，然后将其删除。有点像this fiddle，但我不希望它永远消失。

我尝试使用jQuery，因为我觉得它会更容易，但我显然遗漏了一些东西。有人可以帮忙吗？

Here是我的尝试，但它直接指向数组中的最后一个元素。

var list = [1,2,3,4,5,6];
var length = list.length;

for(i = 0; i < length; i++) {
    $('#nums').html(list[i]).delay(750);
}

哦，我不在乎它是jQuery还是vanilla JavaScript。对我来说没问题。

Answer 1

$(document).ready(function(){
    var list = [1,2,3,4,5,6];
    var length = list.length;

    var i = 0;

    var ivl = setInterval( function () {
        if (i < length) {
            $('#nums').html(list[i]).delay(750);
            i++;
        }
        else {
            clearInterval(ivl);
        }            
    }, 750);
});

Answer 2

（非常聪明）示例使用模数运算符（%）为您提供周期性余数的事实，因此您可以通过获取无限增加数的余数来使用它来遍历数组除以list的长度。

但是，如果您希望它停止，您只需检查一下您是否已完成在列表中骑行：

＆＃13;

var list = [1, 2, 3, 4, 5, 6];
var length = list.length;
var i = 0;
var finished = false;

function repeat() {
  if (!finished) {
    document.getElementById('nums').innerHTML = list[i % length];
    i++;
    if (i === length) {
      finished = true;
    }
  } else {
    clearInterval(interval);
  }
}

var interval = setInterval(repeat, 750);

＆＃13;

<div id="nums"></div>

＆＃13;

Answer 3

派对迟到但是，如果每次迭代执行的代码花费的时间超过间隔持续时间，那么使用setTimeout而不是setInterval会更好吗？我的意思是，我知道在这种情况下它并不是一个问题，但它只是一种更好/更安全的方式来做这类事情。

$(document).ready(function(){
    var list = [1,2,3,4,5,6];
    var length = list.length;
    var i = 0;
    (function next(){
        if (i < length){
            $('#nums').html(list[i++]);
            setTimeout(next,750);
        }
    })();
});

http://jsfiddle.net/zLexhdfp/3/

jQuery / JavaScript延迟和显示

3 个答案: