How to wait for last ajax request to complete before processing next request when frequently calling a function with ajax request?

Question

i've an ajax request in my code as shown below:

function show_detail()
{

     $('#product_'+index).html('<img src="/loading.jpg" style="margin-left:450px;"> loading...');
    $.ajax({
        type: "GET",
        url: "someUrl",
        data: dataString,
        success: function(msg){
            $('#product_'+index).html(msg);
        }

    });
}

My requirement is to call the function show_detail() when clicking any of the product images in a group of product images and display the loading image in a div until the details of a product is completely loaded form ajax request. When the product details are loaded from ajax request I've to overwrite the same div with product details.But the problem is when clicking multiple links at the same time I'm getting more than one loading image the subsequent divs. So I want to wait until the last ajax request is completed while calling the same function (show_detail()) subsequently and show only one loading image at a time. Also I don't want to freeze the browser with async:false

Thanks in advance.

Couldn't you just use a global variable like `loading` or something, set it to true when the button is clicked, and check to make sure it's false before making the AJAX call? — rioc0719, Jan 19 '15 at 06:20
Have you had a look at http://stackoverflow.com/questions/3952387/jquery-wait-until-all-ajax-calls-finish-then-continue ? — Pramod Solanky, Jan 19 '15 at 06:36
Thanks. But it causing more than one loading images showing simultaneously. — Dileep TP, Jan 19 '15 at 06:56

score 1 · Answer 1 · answered Jan 19 '15 at 06:28

jQuery.when() provides a way to execute callback functions based on one or more objects, usually Deferred objects that represent asynchronous events. It makes for a clean and clear syntax, and avoids involving any global variables such as ajaxStart and ajaxStop, which could have unwanted side effects as your page develops.The following shows a slight example.Try reading more about it mate... :)

var req1 = $.ajax({...});
var req2 = $.ajax({...});
var req3 = $.ajax({...});

$.when( req1, req2, req3 ).done(function(){
    console.log("all done")
});

FYI

jQuery.when()

Thanks.But I've only one code for ajax call. The same code is executing on back to back function call.I want to execute all the requests, but one after the other. — Dileep TP, Jan 19 '15 at 07:12

How to wait for last ajax request to complete before processing next request when frequently calling a function with ajax request?

1 Answers1