setTimeout計時在第一個.each（）元素上關閉

Question

我在嘗試使時間與以下代碼一致時遇到問題。 基本上，頁面一旦加載，就應該立即開始循環遍歷li元素並將其突出顯示，並刪除先前突出顯示的元素。 它在大多數情況下都起作用，但是最開始的元素似乎要花兩倍的時間才開始循環，然后其余元素似乎都已定時。 我在這里放了一個小提琴

這是我用來循環的代碼

function addColorClass(boom) {
    $(boom).addClass('li-color');

    if($(boom).is(':last-child')) {
        $(boom).prev().removeClass('li-color');
        setTimeout(function() { cycleFeatures(); $(boom).removeClass('li-color'); }, 1000);
    } else {
        $(boom).prev().removeClass('li-color');
    }

}

function cycleFeatures() {
    i = 1;
    var timer = new Array();
    jQuery('.features').first().addClass('li-color');
    $('.features').each(function($) {
        i++;
        var thiz = this;
        timer[i] = setTimeout(function() { addColorClass(thiz); }, i * 1000);   
    });
}

cycleFeatures();

這是一個無限循環，因此當到達最后一個li元素時，它將調用cycleFeatures()函數。 您可以在小提琴中看到，第一個元素似乎保持突出顯示的時間大約是所有其他元素的兩倍。 我一直把頭撞在牆上，試圖弄清楚，但無濟於事。 有人可以幫我弄清楚如何使突出顯示的持續時間保持一致。

Answer 1

這是解決問題的另一種方法，該問題應該比您的解決方案更容易理解，並且應該更加一致地工作。

var moveLight = function($ele) {
    $(".li-color").removeClass("li-color");
    $ele.addClass("li-color");
};

var idx = 0;
var loop = function() {
    $loopEles = $("li");
    moveLight($loopEles.eq(idx));
    idx = (idx + 1) % $loopEles.length;

    setTimeout(loop, 1000);
}

loop();

http://jsfiddle.net/6gzhLqzz/6/

Answer 2

setTimeout（）函數即使需要在0 ms之后執行，也會放入隊列中。 常規流程完成后，瀏覽器將從setTimeout開始執行隊列

1行

setTimeout（0）

2號線

setTimeout（20）

執行系列將是

第1行第2行settimeout（0）settimeout（20）

希望這可以幫助

Answer 3

問題是您將i初始化為1 。 循環以i遞增，因此第一個超時是2秒，下一個超時是3秒，依此類推。 因此，第一次有2秒的延遲。

只需將其更改為

var i = 0;

您還應該使用var關鍵字將其設置為局部變量。 它不需要是全球性的。

小提琴

Answer 4

您已經將setTimeout設置了兩次，這可能是造成這種情況的原因之一。

這是工作的小提琴： http : //jsfiddle.net/6gzhLqzz/7/

 function cycleAll(active) { if ( !active ) active = 0; var total = jQuery(".list2 .features").length; setTimeout(function(){ prev = active - 1; if ( prev < 0 ) prev = total-1; jQuery(".features").eq(prev).removeClass("li-color"); jQuery(".features").eq(active).addClass("li-color"); active++; if ( active >= total ) { active = 0; }; cycleAll(active); },1000); } cycleAll();