Question

我在尝试使时序与以下代码一致时遇到问题。基本上，只要加载页面，它就应该立即开始循环遍历li元素并突出显示它们，删除先前突出显示的元素。它在很大程度上起作用，但是第一个元素似乎需要大约两倍的时间才开始循环，然后其余部分似乎完全定时。我添加了fiddle here

这是我用来循环的代码

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

即使需要在0 ms后执行，

setTimeout（）函数也会被放入队列中。一旦常规流程完成，浏览器就会从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关键字将其设为局部变量。它不需要是全球性的。

FIDDLE

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

第一个.each（）元素的setTimeout计时关闭

4 个答案: