Question

I have a function, that adjusts element width/height on a page. This function is triggered by a custom dimensionchange event.

I’m

$(window).trigger("dimensionchange") 

whenever I’m loading content via AJAX or changing a page (I’m using jquery mobile).

My problem is on some pages, a bunch of Ajax requests get triggered (like a search page, which ajax loads criteria and intial results), so I’m ending up with several "dimensionchange" events, which all trigger my layout update function. This slows down the page considerably and is not necessary, because I only need to capture the last dimensionchange and then update the layout.

Question:
Is there a way to capture the last occurence of an event when the event fires a random amount of times? The only thing I could think of is to set a timeout on every event occurence and if there is no further event in … 500ms… trigger the page update. But this seems pretty awkward, so I’m curious to know if there is a better way?

Thanks for help!

Answer 1

You want to use jQuery’s Global Ajax Event Handlers ajaxStart() and ajaxStop() methods.

There is another recent post about Using AjaxStop and AjaxStart. The main thing you need to know is that you can be notified when the first ajax query begins, and when the last one ends. You could set a flag like this:

$(document).ready(function() {
    var ajaxBusy = false;

    $(document).ajaxStart( function() { 
        ajaxBusy = true; 
    }).ajaxStop( function() {
        ajaxBusy = false;
    });
});