javascript - jQuery 延迟触发事件

Question

我遇到过这样的情况:页面上有一系列按钮。单击按钮会触发多个功能并运行一系列复杂的计算。

然后我有一个本质上是“单击全部”按钮，它将触发每个按钮上的单击事件:

$('.myBtn').trigger('click'); // $('.myBtn') returns a list of all buttons

这在大多数现代浏览器中工作得很好，但在 IE 中，触发器(“点击”)需要很长时间才能运行，并且我经常收到“脚本花费太长时间”的错误。

不幸的是，事情的设置方式没有真正的方法来避免点击时的繁重计算。

所以我正在考虑添加某种延迟。所以在“点击全部”时，触发btn1点击，等待200ms，触发btn2点击，等待...等等。

我尝试过以下方法:

$('.btnAll').each(function() {
    var el = $(this);
    setTimeout(function () {
        el.trigger('click');
    }, 200);
});

但我认为这不能正常工作，因为 .each() 调用的排队方式或其他原因(？)。事件队列和同步调用对我来说还是有点不清楚。

对于如何实现这项工作有什么想法吗？

Answer 1

.each() 调用不会“排队”，它们只是在集合的每个元素上一个接一个地执行给定的函数。因此，您为每个按钮单击设置了 200 毫秒的超时。结果:200 毫秒后，所有按钮(几乎)同时触发。如果您想错开点击之间的延迟，则必须给它们不同的时间，如下所示:

$('.btnAll').each(function(i) { // i is index of this in the collection
    var el = $(this);
    setTimeout(function () {
        el.trigger('click');
    }, i * 200); // each button gets a multiple of 200ms, depending on its index
});

这会立即触发第一个按钮，200 毫秒后触发第二个按钮，第三个按钮......