Question

I have a jquery ui dialog that is ajax loaded with a partial view from the server. The dialog initially opens as a dialog-ajax-loader and when the call returns it animates/grows to the size of the content.

The problem is when the dialog content gets cached or the ajax call is too fast, I get an undesirable effect where the content is loaded basically right away into the ajax-loader-sized dialog, without the ajax loader actually being visible even for a moment. Needless to say, with all the work I put in to make this look amazing, I can’t settle for this. I need the ajax loader to display for 1 second minimum, or more if the ajax call actually takes more.

I’ve searched the web for quite a while trying to find a nice sleep() function but there’s always a taboo attached. Wanted to post here to get some ideas whats the best way to do this.

The actual code is of course a lot more complicated, but conceptually is follows like this:

 var mydialog = $("<div></div>").dialog({...Ajax loader settings...});

 var minimumTimeMet = false;
 setTimeout(function( ){ minimumTimeMet = true; }, 1000);
 mydialog.dialog("open"); //Open ajax loader

 $.ajax({ 
     cache: false,   //This helps but not always, sometimes the request is just too fast
     ....
     success: function(htmlContentResponse){

          while(!minimumTimeMet){
              //sleep here! However, thread cannot be 
              //blocked because the function set in setTimeout
              //above must executed to change minimumTimeMet = true 
              //and break out of this loop. 
          }

          mydialog.html(htmlContentResponse);  
          mydialog.animate({...Animate into new dialog settings ...});
     }

 });

Answer 1

Try adding a flag before firing the request and at the same time setTimeout of 1000ms and clear the flag in the callback

var flag = false;
var response;

setTimeout(function () {
    flag = true;
    if (response) {
        ajaxCallback(response);
    }
}, 1000);

$.ajax({
    cache: false,
    success: function(htmlContentResponse){
        response = htmlContentResponse;
        if (flag)   {
            ajaxCallback(response);
        }
    }
});

function ajaxCallback(htmlContentResponse) {
    // Do something
}

This way, if the ajax call is finished early, it will wait till the setTimeout callback is executed.