延迟触发每个链接上的点击事件答案

【问题标题】：Fire click event on each link with a delay延迟触发每个链接上的点击事件
【发布时间】：2011-12-07 15:23:20
【问题描述】：

使用 jQuery，我有一个链接集合，每个链接都有一个 .refresh 类

我想创建一个函数，在每个链接上触发点击事件，每次点击之间有 10 秒的延迟。

以下代码同时触发每个链接的点击事件

function refreshAllPeople() {
    $('.refresh').each(function(){
        window.setTimeout($(this).click(), 10000);
    })
}

这是每个链接的详细信息

每个链接都发送一个 HTTP 请求。我需要延迟以避免“连接过多”错误

<a data-remote="true" class="refresh" href="http://localhost:5000/person/refresh/3224">Refresh</a>

对于非 Rails 开发人员，Rails 会分别找到每个 data-remote="true" 并使用 AJAX 请求操作链接的 href 属性覆盖点击操作。

一切都发生在handleRemote函数here中。

【问题讨论】：

从用户的角度来看，这听起来很奇怪。人们希望当他们点击某些东西时会立即发生某些事情，或者至少会看到某种加载图标 - 不必等待 10 秒才能得到响应，甚至不知道发生了什么事情。
@Denis，您是要立即触发第一个 click 事件还是在最初的 10 秒延迟后触发？
马上，每次点击发送一个http请求，我需要延迟以避免太多的连接错误
啊，所以 10 秒的延迟是任意的 :) 当上一个 AJAX 请求返回时触发下一个 click 事件不是更好吗（可能多于或少于 10 秒，但会保证在给定时间只有一个活动请求）？
@Denis，您能否使用您的 click 事件处理程序（执行 AJAX 请求的处理程序）的代码以及您的标记的一小段摘录来更新您的问题，以便我们可以看到你的.refresh 元素？

标签： javascript jquery ruby-on-rails

【解决方案1】：

而不是调用每个，只需调用 click。您传递的函数将被连接为结果中每个元素的点击处理程序。

    $('.refresh').click(function(){
        alert('hello');
    });

然后实际延迟触发每个链接：

function clickAll(links, index) {
    if (index == links.length) return;
    setTimeout(function() {
        $(links[index]).click();
        clickAll(links, ++index); 
    }, 1000);
}

function refreshAllPeople() {
    clickAll($('.refresh'), 0);
}

这是fiddle

编辑

根据您的 cmets，如果您希望每个链接都触发一个 ajax 请求，然后在完成后转到下一个链接，那么应该可以使用类似的方法。我假设您想从每个链接中提取一些数据，并将其添加到请求中？

function clickAllWithAjax(links, index) {
    if (index == links.length) return;

    $.ajax({ url: 'foo.php?name=' + $(links[index]).text(),
             success: function(response) {
                //do something with response?
                clickAllWithAjax(links, ++index);
             } 
    });
}

【讨论】：

@denisjacquemin - 哇 - 很高兴听到这个消息。

【解决方案2】：

这是我根据亚当的解决方案实现的解决方案

function refreshAllPeople(links, index) {
    if (index == links.length) return;

    $(links[index]).hide();
    $(links[index]).prev('img').show(); // img tag is a spinner

    $.ajax({ url: $(links[index]).attr('href'),
             success: function(xhr, data, status) {
                $(links[index]).parent().prev().html(data.title);
                $(links[index]).show();
                $(links[index]).prev('img').hide();
                refreshAllPeople(links, ++index);
             } 
    });
}

【讨论】：