jQuery限制同时AJAX请求的数量

时间:2012-04-23 07:53:30

标签: javascript jquery ajax

所以我想要触发一系列AJAX事件,但是我想将同时请求的数量限制为5,并将其余的请求排队。例如,我有以下内容:

 $("div.server").each(function() {
     $.ajax(....);
 });

因此,类server可能有100个div,但我想在任何给定时间只运行5个请求。请求完成后,应继续执行下一步。

这样做的最佳方式是什么?

3 个答案:

答案 0 :(得分:6)

执行此操作的最佳方法是让浏览器处理它。通常,浏览器已经具有每主机连接限制,因此如果存在太多,它们将自动对连接进行排队。

但是,我会考虑更改API,以便从多个元素中获取日期,并返回多个元素的数据 - 即减少必要的HTTP请求的总数。

答案 1 :(得分:5)

将所有请求参数推送到具有名为queueRequest的函数的队列,并调用checkQueuecheckQueue检查队列中是否有项目以及活动请求的数量是否小于5.如果满足这些条件,它会从队列中弹出请求并将其转换为真正的AJAX请求。然后,它会在请求中附加done处理程序,以减少活动请求数并调用checkQueue

答案 2 :(得分:2)

如果仍然不确定浏览器排队请求的功能,你可以尝试这样的事情:

var count = 0;          // Number of functions being called
var funcArray = [];     // Array of functions waiting
var MAX_REQUESTS = 5;   // Max requests
var CALL_WAIT = 100;        // 100ms

function call()
{
    // Check if count doesn't exceeds or if there aren't any functions to call
    if(count >= MAX_REQUESTS || funcArray.length == 0)
        // Call call() after 100ms
        setTimeout(function() { call() }, CALL_WAIT);
    count++;            // Add request to the counter
    var func = funcArray.pop();
    $.ajax(..., function(data)
    {
        func(data);
        // .......
        count--;        // Substract request to the counter
    });
}

$(function()
{
    call();     // First call to start polling. It will call itself each 100ms
});

$(function()
{
    $("div.server").each(function() {
         funcArray.push(function(data)
         {
            alert(data);
         });
     });
});

您可能需要根据需要调整它。