javascript - 在每个 .each 之间插入一个延迟

Question

我发现了一些与此相关的其他问题，但这些答案对我不起作用，所以我正在检查是否有更新的内容或可以使用的内容。本质上，我在 jQuery 的 .each 中更新 div，但我希望它们每隔几秒更新一次。这是我尝试过的:

function randomColor() {
$('div').each(function(i) {

    setTimeout(function() { 
        var colors = ['blue', 'green'];
        var n = Math.floor(Math.random() * colors.length);
        var color = colors[n];
        $(this).addClass(color);
    }, 500 + (i * 500));
});
}

我也试过使用一个单独的函数:

function randomColor() {
$('div').each(function(i) {
    var time = 500;
    setTimeout(function() { 
        applyColor($(this)); 
    }, time);
    time += 500;
});
}
function applyColor(div) {
    var colors = ['blue', 'green'];
    var n = Math.floor(Math.random() * colors.length);
    var color = colors[n];
    $(div).addClass(color);
}

这两个都没有返回错误，但是 div 没有得到更新。如果我在没有 setTimeout 的情况下运行此代码，它会完美运行。我也尝试过以这种方式使用延迟:

$('div').delay(1000).each(function() {
...
});

那延迟了 1 秒，但在那一秒之后立即更新了所有内容。如果我将延迟向下移动到 addClass 行附近，它会再次完全停止工作。谁能指出这个(希望是简单的)错误？

Answer 1

您正在创建一个匿名函数，并且在该函数内部 this 具有不同的含义(即 window 对象)。

一个解决方案是缓存this:

var $this = $(this);
setTimeout(function() { 
    var colors = ['blue', 'green'];
    var n = Math.floor(Math.random() * colors.length);
    var color = colors[n];
    $this.addClass(color);
}, 500 + (i * 500));