setTimeout 不适用于每个循环答案

【问题标题】：setTimeout not working with each loopsetTimeout 不适用于每个循环
【发布时间】：2016-04-12 14:24:48
【问题描述】：

我正在尝试使用 setTimeout 来延迟每个循环。

  $(".video_nav .item_container > .item").each(function() {
var button = $(this);
            setTimeout(function(i) {
                 alert("test");
                button.trigger("click");

            },2000);
        });

警报或点击事件未触发。我哪里做错了？我希望每次循环迭代为 2 秒。

【问题讨论】：

选择器是否正确？如果是，那么至少 alert() 应该可以工作。
this 不是你想的那样。
@SLaks 我改变了它，我应该每 2 秒收到一次警报，但什么都没有？
我终于收到了一个警报，但发生的情况是 2 秒后警报一个接一个地出现，而不是中间的 2 秒。
出现这种情况是因为 setTimeout 是异步工作的——每次调用它都会创建一个新线程，而不是等待完成。然后每个线程将在 2 秒后触发。您需要使用同步方法等待“就地”循环完成。这在 JavaScript 中不存在开箱即用 - here 你可以找到这样的“忙等待”功能。

标签： jquery

【解决方案1】：

我不知道我的问题是否正确，但您想在 2 秒后循环遍历某些元素？

使用Jquery解决这个问题的方法：

您可以将延迟方法 (https://api.jquery.com/delay/) 与队列方法 (https://api.jquery.com/queue/) 结合使用

$(".video_nav .item_container > .item").each(function() {
    var button = $(this);
    $(button).delay(2000).queue(function(){
      alert("test");
      button.trigger("click");
   });
});

有关工作示例，请查看此链接： https://jsfiddle.net/crix/bb4nbkts/

希望这对你有帮助。

【讨论】：

【解决方案2】：

尝试在这种情况下使用箭头功能，

$(".video_nav .item_container > .item").each(function(i) {
  setTimeout(() => { 
   $(this).trigger("click");
  }, i * 2000);
});

您的代码中的问题是this 上下文。在普通 setTimeout 的回调中，this 将指向window。于是就有了箭头函数，它将其最近的上下文的this值绑定到其中。

另外你必须给(i * 2000)一个延迟，那么只有延迟会变成0,2000,4000等等。这将使您看到回调以 2 秒的间隔工作。

【讨论】：

谢谢它的工作，为什么箭头功能得到这个工作？