javascript - jQuery请求一个url列表，同时限制最大并发请求数

Question

可能重复：
排队 AJAX 调用

我有一个 id 列表：

var ids = [3738, 75995, 927, ... ]; // length is about 2000

我想用 请求网址http://xx/ + id，$.getJSON例如：

ids.forEach(function(id, index){
    $.getJSON('http://xx/' + id, function(data){
        // store the data in another array.
    });
});

但是这样会一次性发出过多的请求，让浏览器阻塞一段时间，所以我的问题是，如何限制 jQuery 中并发 ajax 请求的数量？例如，我发送 10 个请求，当他们每个人都收到响应时，我发送另一个请求。

Answer 1

var $queue = $({});

ids.forEach(function(id, index) {
    $queue.queue("ajaxQueue", function( next ) {
        $.getJSON('http://xx/' + id, function(data){
            // store the data in another array.

            next();
        });
    });
});

$queue.queue("ajaxQueue", function() {
    // everything is saved
});

$queue.dequeue("ajaxQueue");

---

jQuery 文档：

jQuery.queue
jQuery.dequeue

所以：

jQuery 中的队列是什么？

---

还：

解决方案应该是如何让后端处理多个 id。–埃帕斯卡雷罗

---

##当时的十个请求：有一些问题！

var $queue = $({}),
    handler;

ids.forEach(function(id, index) {
    if ( !(index % 10) && handler ) {
         $queue.queue("ajaxQueue", handler);
    }
    handler = (function(prev) {
        return function( next ) {
            prev();
            $.getJSON('http://xx/' + id, function(data){
                // store the data in another array.
            });
            if ( next ) {
                next();
            }
        }
    })(handler);
});

$queue.queue("ajaxQueue", function() {
    // everything is saved
});

$queue.dequeue("ajaxQueue");

x % y

(index % 10) => Math.floor(index/10)*10 === index;
!(index % 10) => Math.floor(index/10)*10 !== index;

Answer 2

shift()或pop()在您开始请求时从数组中删除 id。首先发出 10 个请求。然后在complete()ajax 调用的处理程序中，检查数组长度。如果它大于 0，则setTimeout持续几百毫秒（以释放浏览器一点），然后移动或弹出另一个 ID 并触发另一个请求。

Answer 3

这应该可以解决问题：

var current;    

function fetchCurrentLast()
{
    if (current < ids.length)
    {
        var id = ids[current];
        current++;

        $.getJSON('http://xx/' + id, function(data){
            // store the data in another array.

            fetchCurrentLast();
        });
    }
}

current = 0;

for (var i = 0; i < 10; i++)
{
    fetchCurrentLast();
}

Answer 4

var cnt = 0;
function getEach() {
    if (cnt>=ids.length) return;
    $.getJSON('http://xx/' + ids[cnt], function(data){
    // store the data in another array.
    cnt++;
    getEach(); 
    // or setTimeout(getEach,1000); to wait a sec
    // or if (cnt%10==0) setTimeout(getEach,1000); to wait a sec every 10
    //    else getEach();
  });
}