jQuery中不重复的Each行为

Question

奇怪的概念性问题。下面的数组包含三个元素。当我运行这段代码时，我的意图是让脚本等待两秒钟，显示一个警报，等待两秒钟，显示一个警报，再等待两秒钟，并显示最后一个警报。但实际上，它只等待了两秒钟，然后连续显示了所有三个警报。我已经尝试了一段时间，但找不到我缺少的东西。有什么建议吗？

      $.each(node_array, function(index,value){
        if(value != undefined){
          setTimeout(function(){
            alert("hey")},
          2000)
        }
      });

- user1114864

Answer 1

当你迭代时，你设置了超时但没有停止迭代。因此所有的setTimeout同时启动。 你需要做的是在用户点击警报后启动下一个setTimeout。

var i=0;
function onestep(){
   alert('hey');
   var value = node_array[i];
   if (++i<node_array.length) setTimeout(onestep, 2000);
}
onestep();

演示

该链接是一个演示页面。

- Denys Séguret

Answer 2

每次迭代将延迟增加2秒。

$.each(node_array, function(index,value){
    if(value != undefined){
        setTimeout(function(){
            alert("hey");
        },(index+1)*2000)
    }
});

setTimeout是非阻塞的，因此在延迟时间未到之前代码将继续运行，这会导致您同时触发x个具有相同延迟的setTimeout，因此它们都会在同一时间完成。

- Kevin B

---

这是一个好主意，但如果你不够快，警报之间就不会有延迟。 - Denys Séguret

在我看来，这正说明了为什么警报不应该用于调试。 - Kevin B

我完全同意这一点。构建那个演示确实很痛苦。但是由于用户阅读和点击警报而导致的延迟类似于其他延迟（例如Ajax请求或事件）。 - Denys Séguret