jQuery限制同时进行的AJAX请求数量

Question

我有一系列的 AJAX 事件需要触发，但我想限制同时请求的数量为 5，并将其余请求排队。例如，我有以下代码：

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

可能有100个class为server的div，但我只想在任何给定时间运行5个请求。一旦一个请求完成，它应该继续下一个。

最好的做法是什么？

- Justin

Answer 1

最好的方法是让浏览器处理它。通常，浏览器已经有每个主机连接限制，因此如果连接过多，则会自动排队连接。

但是，我建议更改API，使其获取多个元素的数据并返回多个元素的数据 - 即减少必要的HTTP请求总数。

- ThiefMaster

---

在Chrome中尝试过，似乎一次最多只能发出4个请求。 - Justin

同意。将请求参数汇总到一个数组或对象中，并一次性传递，让服务器处理该数组。 - Ross

Answer 2

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

- Ates Goral

Answer 3

如果您仍然对浏览器在排队请求方面的能力感到不确定，您可以尝试类似以下的方法：

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

你可能需要根据自己的需求进行微调。

- Arvaga

---

不错，但是你在call函数内的if后面一定要加上一个“else”。否则它会触发所有请求，而不会有任何等待... - Dunstkreis