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内部具有不同的含义（即窗口对象）。

一种解决方案是缓存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);
  });
});

当运行功能时，它会随机选择一个类名（'蓝色'或'绿色'）。然后在等待1秒后更新DIV。然后移到每个循环中的下一个。

Answer 3

以下是使用setTimeout和增量来循环div s而不是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之间插入一个延迟

3 个答案: