javascript - jQuery 限制同时 AJAX 请求的数量

Question

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

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

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

做这个的最好方式是什么？

Answer 1

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

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

Answer 2

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

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

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