使用 .each 的定时 Jquery 事件答案

【问题标题】：Timed Jquery events using .each使用 .each 的定时 Jquery 事件
【发布时间】：2011-12-24 14:35:45
【问题描述】：

我正在尝试在具有相同类的列表项上模拟单击事件，每隔几秒一次。我已经尝试了很多不同的方法。使用 .each 和 delay() 的组合会导致同时触发所有点击。我找到了一个有类似问题的人，答案是执行以下操作...

            var elements = $(this).find('.slide');
            var index = 0;

            setTimeout(function () {
                $(elements).get(index).trigger("click");
                index++;
            }, 3000);

这每次都会给我一个 js 错误，并且似乎没有填充数组...也许我遗漏了一些明显的东西...

谢谢

【问题讨论】：

我们需要你的html，你有'.slide'类的元素

标签： jquery settimeout each

【解决方案1】：

在您的示例中，点击应该只触发一次，因为您没有递归。

尝试以下操作：

$(this).find('.slide').each(function(index) {
    $(this).delay(3000 * index).click();
});

您将同时创建所有超时，但时间不同。

【讨论】：

.delay() 将延迟一个队列，在这种情况下，fx 队列看起来是空的。它不会延迟函数链中的下一个动作。
我尝试了几种不同的方法，发现使用 .each 时会忽略超时。

【解决方案2】：

这是完全脱离上下文的代码，我如何使用递归超时每 1 秒触发一次 .list-elements 的点击

 (function(){
var listElements = jQuery( ".list-elements" ), i = 0;

     function triggerClick(){

        if( listElements[i] ) {
        listElements.eq( i++ ).trigger( "click" );
        window.setTimeout( triggerClick, 1000 );
        }

     }
window.setTimeout( triggerClick, 1000 );
 })()

【讨论】：

【解决方案3】：

jQuery.fn.delay() 仅适用于使用 jQuery 制作的动画，目前还无法使用 jQuery 核心来延迟代码。然而，jQuery 中有 plugins implementing setTimeout() 和类似的东西，但它们并没有比原来的 setTimeout() 添加太多功能。

至于修复你的代码 ;)
jQuery.fn.get() 获取实际的 HTMLDomElement，它没有方法 .click()。（我希望这是你得到的错误。）请改用jQuery.fn.eq()。另外，使用setInterval()而不是setTimeout()，使其多次工作，然后当所有“点击”时，清除间隔：

var interval = setInterval(function () {
  elements.eq(index).trigger("click");
  index++;
  if(index == elements.size()){
    clearTimeout(interval);
  }
}, 3000);

【讨论】：