jQuery / JavaScript延遲和顯示

Question

我想遍歷一個數組並單獨顯示每個元素，然后將其刪除。 有點像這種小提琴 ，但我不希望它永遠存在。

我嘗試使用jQuery是因為我認為這樣會更容易，但是我顯然缺少了一些東西。 有人可以幫忙嗎？

這是我的嘗試，但只是直接進入數組中的最后一個元素。

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還是香草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的長度來使用它來遍歷數組。 。

但是，如果您希望它停止運行，您可以檢查一下列表是否已完成：

 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); 

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

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/