Question

I’ve read many posts about this but still can’t wrap my head around fixing my problem. I’ve looked at jQuery.when but not sure how to use it. I get data from the server via ajax and then it updates the page. Sometimes, it might take a few seconds depending on how much data is being returned. I don’t want that same ajax function to run until all html has loaded on the page. Is that possible?

I have a timer to run a function that calls an ajax request.

setInterval( "update()", 25000 ); 

This is the ajax inside the update function

                    $.ajax({
                            type: "POST",
                            url: "/ajax/modify.php",
                            data: "id="+ id +"& action="+ act,
                            success: function(response){
                                //update the html on the page
                            }           
                    }); 

There is a way for the user to get more posts by clicking on a link. Well problem is, if they click that link to get more posts and the timer happens right after, it refreshes the page and interrupts the users request and reloads the div container with what was there before. So I need it to wait until the response has completed and the page has been updated before allowing more requests.

An example what be appreciated.

Answer 1

JQuery’s ajax method returns a promise, which you can use to attach callbacks. You can store away this promise into a variable. On success/fail of the function, you can clear the variable. This way you know if a request is currently active or not. Just make sure the variable is outside the function scope or it won’t do anything to help you. For example:

var currentRequest = null;

function doUpdate() {
    // don't do anything if there's an active request
    if (currentRequest)
        return;

    currentRequest = $.ajax({
        type: "POST",
        url: "/ajax/modify.php",
        data: "id="+ id +"& action="+ act
    }).then(function(response) {
        // do your UI updates here.
    }).always(function() {
        // whether the call succeeds or not, still clear out the request
        // so that the next call into the function makes a new request
        currentRequest = null;
    });
}