CODEWITHSUNDEEP
jqueryajax
Oliver Andrich
Oliver Andrich

Reputation: 522

Show ajax loading indicator not immediately but after a delay

My current web app project makes heavy use of ajax calls. Most of them are fast and respond almost immediately. So, showing ajax loader all the time is not necessary. But I want to show an ajax loader when ajax calls take longer then 250ms (or so). Otherwise the users might be confused and keep clicking on links over and over again. :)

Any ideas how to accomplish that using jQuery?

Upvotes: 5

Views: 2822

Answers (3)

Prarim Hoxha
Prarim Hoxha

Reputation: 11

var activity = false;
$("#loadingIndicator").ajaxStart(function() {
    activity = true;
    window.setTimeout(function() {
        if (activity) {
            //alert('activity');
            $("#loadingIndicator").show();
        }
    }
    , 700);
});
$("#loadingIndicator").ajaxStop(function() {
    activity = false;
    $(this).hide();
});

Upvotes: 1

Brian Agnew
Brian Agnew

Reputation: 272417

Can you use a Javascript timer to trigger after 250ms to display your 'loading...' message ?

Activate this on ajaxSend(), and disable it on ajaxComplete() (and clear the 'loading...' message if reqd), and so the implementation should be transparent to whatever Ajax calls you make.

Upvotes: 2

Peter Perháč
Peter Perháč

Reputation: 20792

I have no previous experience with jQuery but to achieve a simple delay to execution of some code, just use this:

setTimeout ("foo()", 250);

where foo() is the function responsible for loading... indication.

Upvotes: 4

Related Questions