CODEWITHSUNDEEP
jqueryajaxasynchronous
Olaf Erlandsen
Olaf Erlandsen

Reputation: 6036

how to send ajax request via jQuery and Queue?

Well, I have a list of "ID" and I need to send an Ajax request for each of the "ID". The ides is that when a request is finished, run the following Ajax request. All this with asynchronous requests, since otherwise, the browser is literally "stopped" until the request finishes loading.

The logic is quite simple: We create a loop in the loop and create an Ajax request asinconica per ID. The problem is that an asynchronous Ajax request prevents me from accessing the global variable ID.

Example:

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

Note that each request must be sent after the previous finished loading and always will be a dynamic list because sometimes I'll have to send different ID.

Upvotes: 0

Views: 77

Answers (2)

liuzeyafzy
liuzeyafzy

Reputation: 85

I think DinoMyte's answer is useful. Based on @DinoMyte's answer, you can also use .push() and .shift() to manipulate the array 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();
    }
}

Upvotes: 1

DinoMyte
DinoMyte

Reputation: 8868

You can try. I have removed the for loop and initiate next call with index incremented only after the previous call succeeded.

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

Upvotes: 2

Related Questions