Question

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

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

以下代码同时触发每个链接上的click事件

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。

Answer 1

不要打电话给每个人，只需拨打电话。您传递的函数将作为结果中每个元素的单击处理程序连接起来。

    $('.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

修改

根据您的评论，如果您希望每个链接触发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); } }); }

Answer 2

以下是我根据adam的解决方案实施的解决方案

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);
             } 
    });
}

在每个链接上触发点击事件并延迟

2 个答案: