Show ajax loading indicator not immediately, but after a delay

Question

My current web application project is heavily using ajax calls. Most of them are quick and react almost immediately. Thus, showing the ajax bootloader all the time is not required. But I want to show the ajax loader when ajax calls take longer than 250 ms (or so). Otherwise, users may be confused and constantly click on links again and again. :)

Any ideas on how to do this using jQuery?

Answer 1

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

setTimeout ("foo()", 250);

foo() - , ...

Answer 2

Javascript 250 "..."?

ajaxSend() ajaxComplete() ( "...", reqd), Ajax, .

Answer 3

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