在每个 .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);
}

这两个 return 都没有错误，但是 div 没有得到更新。如果我运行这段代码没有设置超时，它就可以完美运行。我也尝试过以这种方式使用延迟：

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

Answer 2

我想你想做的是：

function randomColor() {
  var colors = ['blue', 'green'];
  var n = Math.floor(Math.random() * colors.length);
  var color = colors[n];
  $('div').each(function() {
    $(this).delay(1000).addClass(color);
  });
});

当 function 为运行时，它会随机选择一个 Class 名称（'blue' 或 'green'）。然后它将在等待 1 秒后更新 DIV。然后移动到每个循环中的下一个。

Answer 3

下面是一个使用 setTimeout 和增量器循环遍历 div 的示例，而不是 jQuery each 方法。

JSFiddle

(function randomColorDiv(ii) {

    var colors = ['blue', 'green']
    var n = Math.floor(Math.random() * colors.length)
    var color = colors[n]
    $($('div')[ii]).addClass(color)

    if ( ii < $('div').length ) {
        setTimeout(function() { 
            randomColorDiv(++ii)
        }, 1000)
    }

}(0))

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

Insert a delay between every .each

javascript

jquery

delay