Question

I have the ajaxloader show and hide in my ajaxsetup like this

beforeSend:function(xhr, settings){
$('.loader').show();

---

 complete:function(){
         $('.loader').hide();

Now the request happens very fast and my animation only loads for merely less than second.

Is there any way i can put some delay so that animation stays there for 3 seconds and then div gets updated.

So basically its delay the ajax call not just delaying the animation because i also dont wnat that ajax request gets completed and animation is still there

Answer 1

Since it has never been crystal clear to me what exactly you’re trying to do, here is a solution that does the following:

1. You can only change the jQuery ajax infrastructure – you cannot change all the callers of ajax so you’re looking to do things from within the ajax function without changing the calling code.
2. When an ajax call is started, put up progress immediately, but delay the sending of the ajax request for 1.5 seconds.
3. When the ajax call is complete, hide the progress status.

Here’s the code:

// save old function
$.ajaxOld = $.ajax;

// install our global status hide handler
$.ajaxSetup({
    complete: function() {
        $('.loader').hide();
    }
});

// replace ajax call with our own that adds the delay
$.ajax = function() {
    // save state from the original function call for use later
    var args = [].slice.call(arguments);
    var self = this;

    // show progress immediately
    $('.loader').show();

    // call the original ajax function in 1.5 seconds
    setTimeout(function() {
        $.ajaxOld.apply(self, args);
    }, 1500)
}

Caveat – this will work as long as no call to $.ajax() was expecting it to return the jqXHR object and there is no use of ajax deferreds. If those are used, then a more complicated solution would need to be coded that holds off the success handler and completion handler.

---

Edit: these are older attempts to understand what the question was:

To make sure the notification is on screen for a minimum amount of time, you could do this:

beforeSend:function(xhr, settings){
    xhr.startTime = new Date().getTime();
    $('.loader').show();

complete:function(xhr){
    var elapsed = new Date().getTime() - xhr.startTime;
    if (elapsed < 3000) {
        $('.loader').delay(3000 - elapsed).hide(1);
    } else {
        $('.loader').hide();
    }

This will keep track of how long the message was on screen and if the ajax call went quickly, it will delay hiding the msg until 3 seconds have elapsed. If the ajax call didn’t go quickly and the message has already been displayed long enough, it will just hide it when the ajax call completes.

---

If what you want to do is to delay the loading of the content and you are processing the result in the complete handler, then you can do that like this:

function finishMyAjax(xhr) {
    // load your ajax content
    $('.loader').hide();
}

    beforeSend:function(xhr, settings){
        xhr.startTime = new Date().getTime();
        $('.loader').show();

    complete:function(xhr){
        var elapsed = new Date().getTime() - xhr.startTime;
        var self = this;
        var args = [].slice.call(arguments);
        if (elapsed < 3000) {
            setTimeout(function() {
                finishMyAjax.apply(self, args);
            }, 3000-elapsed);
        } else {
            finishMyAjax.apply(this, arguments);
        }

If you are not processing the result of the ajax all in the complete handler, then please include the code for processing the result so I can include it in this idea. The general idea here is that you record the time when the ajax call starts. If when the ajax response comes, it has been less than 3 seconds, you set a timer for the amount of remaining time in the 3 seconds and finish the response in the timer callback. If it’s been more than 3 seconds, then you just go ahead and process the result normally.

This allows you to never use more time than desired, but always at least 3 seconds. You could just delay launching the ajax call for 3 seconds, but then if you ajax call takes 6 seconds to get a result, the whole process would take 9 seconds which is not what you want. In my scheme, if the ajax result takes 1 second, you will delay processing it until 3 seconds. If the ajax result takes 6 seconds, the result will get processed right when it comes in (no extra 3 second delay).