Javascript 在每个之间插入一个延迟

我还发现了一些与此相关的其他问题，但答案对我来说并不适用，所以我正在检查是否有更新的或可以使用的东西。本质上，我正在更新jQuery中的.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行附近，它将再次完全停止工作。有人能指出这个（希望是简单的）错误吗？

您正在创建一个匿名函数，在该函数中，

此

具有不同的含义（即窗口对象）

一种解决方案是缓存此：

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

---

您正在创建一个匿名函数，在该函数中，

此

具有不同的含义（即窗口对象）

一种解决方案是缓存此：

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

---

我想你想做的是：

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。然后转到每个循环中的下一个循环。

我认为您要做的是：

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。然后移动到每个循环中的下一个。

下面是一个使用

setTimeout

和增量元素在

div

s上循环的示例，而不是使用jQuery

Each

方法

（函数随机着色div（ii）{
var colors=['蓝色'，'绿色']
var n=Math.floor（Math.random（）*colors.length）
var color=colors[n]
$（$（'div'）[ii]）.addClass（颜色）
如果（ii<$（'div'）。长度）{
setTimeout（函数（）{
randomColorDiv（++ii）
}, 1000)
}
}(0))

下面是一个使用

setTimeout

和增量元素在

div

s上循环的示例，而不是使用jQuery

每个

方法

（函数随机着色div（ii）{
var colors=['蓝色'，'绿色']
var n=Math.floor（Math.random（）*colors.length）
var color=colors[n]
$（$（'div'）[ii]）.addClass（颜色）
如果（ii<$（'div'）。长度）{
setTimeout（函数（）{
randomColorDiv（++ii）
}, 1000)
}
}(0))

可能重复@dhirajbodichera我确实看到了这个问题，答案对我没有帮助。在发布之前我做了很多搜索，正如我在@dhirajbodichera的开头提到的，我确实看到了这个问题，答案对我没有帮助。我在发帖前做了很多搜索，正如我在开始时提到的，感谢你的快速回复！我这样做了，效果非常好。期限一到，我就接受答复。非常感谢你的帮助！感谢您的快速回复！我这样做了，效果非常好。期限一到，我就接受答复。非常感谢你的帮助！