jQuery 限制同时 AJAX 请求的数量答案

【问题标题】：jQuery Limit The Number Of Simultaneous AJAX RequestsjQuery 限制同时 AJAX 请求的数量
【发布时间】：2012-04-23 07:53:30
【问题描述】：

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

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

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

最好的方法是什么？

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

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

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

【讨论】：

在 Chrome 中尝试过，似乎一次最多 4 个请求。
同意。将请求参数聚合在一个数组或对象中并传递一次，让服务器处理数组。

【解决方案2】：

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

【讨论】：

【解决方案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);
         });
     });
});

您可能需要根据需要对其进行调整。

【讨论】：

不错，但您应该明确地在调用函数中的 if 之后添加一个“else”。否则它将触发所有请求并且不会做任何等待...