如何通过 jQuery 和 Queue 发送 ajax 请求？

Question

嗯，我有一个“ID”列表，我需要为每个“ID”发送一个 Ajax 请求。 想法是，当请求完成时，运行以下 Ajax 请求。 所有这一切都与异步请求有关，否则，浏览器实际上会“停止”，直到请求完成加载。

逻辑很简单： 我们在循环中创建一个循环，并为每个 ID 创建一个 Ajax 请求 asinconica。 问题是异步 Ajax 请求阻止我访问全局变量 ID。

例子：

// This list will always have 40 items/values.
var ids = [12,3453,234,743,235,433, ..];
for (var index = 0; index < ids.length; index++) {
    // This request take long time( 40-60 seconds)
    $.ajax({
        url        :    'http://website.com/id=' + ids[index], // See here how to call to global variable ids
        success    :    function (response) {
            // And here, i call the element '#element' and get and set the 'value text'
            var currentTotal = parseInt($('#element').text());
            $'#element').text(currentTotal  + response.total);
        },
        async:true // See here, this is a Async request
    });
}

请注意，每个请求都必须在上一次加载完成后发送，并且始终是动态列表，因为有时我必须发送不同的 ID。

Answer 1

你可以试试。我已经删除了 for 循环并启动下一个调用，只有在上一个调用成功后才会增加索引。

// This list will always have 40 items/values.
var ids = [12,3453,234,743,235,433, ..];
var index = 0;
RequestAjax(ids,index);

function RequestAjax(ids,index)
{    
    if(ids.length > index)
    {
    // This request take long time( 40-60 seconds)
    $.ajax({
        url        :    'http://website.com/id=' + ids[index], // See here how to call to global variable ids
        success    :    function (response) {
            // And here, i call the element '#element' and get and set the 'value text'
            var currentTotal = parseInt($('#element').text());
            $'#element').text(currentTotal  + response.total);
            RequestAjax(ids,index++);
        },
        async:true // See here, this is a Async request
    });
    }
}

Answer 2

我认为 DinoMyte 的回答很有用。 根据@DinoMyte 的回答，您还可以使用.push() 和.shift() 来操作数组ids。

// This list will always have 40 items/values.
var ids = [];
Manipulate([12,3453,234,743,235,433]);

function RequestAjax()
{    
    if(ids.length > 0)
    {
    var id = ids.shift();
    // This request take long time( 40-60 seconds)
    $.ajax({
        url        :    'http://website.com/id=' + id,
        success    :    function (response) {
            // And here, i call the element '#element' and get and set the 'value text'
            var currentTotal = parseInt($('#element').text());
            $'#element').text(currentTotal  + response.total);
            RequestAjax();
        },
        async:true // See here, this is a Async request
    });
    }
}

function Manipulate(id)
{
    var shouldRequest = false;
    if(0 === ids.length){
        shouldRequest = true;
    }

    if(toString.apply(id) === '[object Array]'){
        ids = ids.concat(id);
    }else if('number' === typeof id){
        ids.push(id);
    }

    if(shouldRequest === true && ids.length > 0){
        RequestAjax();
    }
}