javascript jQuery 限制并发 AJAX 请求的数量

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10276784/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 09:17:33  来源:igfitidea点击:

jQuery Limit The Number Of Simultaneous AJAX Requests

javascriptjqueryajax

提问by Justin

so I have a series of AJAX events I would like to fire, but I want to limit the number of simultaneous requests to 5, and queue up the rest. So for example, I have the following:

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

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

So there may be 100 divs with the class server, but I want to only run 5 requests at any given time. Once a request finishes it should proceed to the next.

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

What is the best way to do this?

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

采纳答案by ThiefMaster

The best way to do this is letting the browser deal with it. Usually browsers already have a per-host connection limit so they will automatically queue connections if there are too many.

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

However, I'd consider changing the API so it takes date from multiple elements and also returns data for multiple elements - i.e. reducing the overall count of HTTP requests necessary.

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

回答by Ates Goral

Push all request arguments to a queue with a function called queueRequestand call checkQueue. checkQueuechecks to see if there are items in the queue and if the number of active requests is less than 5. If these conditions are met, it pops a request from the queue and turns it into a real AJAX request. Then it attaches a donehandler to the request that decreases the active request count and calls checkQueue.

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

回答by Arvaga

If still unsure about the browser's capabilities in queueing the requests, you could try something like this:

如果仍然不确定浏览器在请求排队方面的能力,您可以尝试以下操作:

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

You may have to tweak it for your needs.

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