JQUERY AJAX ---- Pausing for usability reasons but only when nessesary?

Question

I have a LoadingStatus Function that has two options SHOW or HIDE.

The Show triggers to display when the JQUERY POST is made, the HIDE happens after the RESPONSE comes back.

The issue I'm having is that sometimes this happens so fast that it makes for a bad experience. What I thought about doing was putting in a JavaScript PAUSE, but if the POST takes a while to respond it will take even longer because of the PAUSE.

How can I have my SHOW HIDE function work together, to make sure at minimum the SHOW was displayed to the user for at least 1/2 second?

function saveBanner (action) {

    if (action == 'show') {
     // Display the AJAX Status MSG
     $("#ajaxstatus").css("display","block");
     $("#msg").text('Saving...');
    }
    else if (action == 'hide') {
     $("#ajaxstatus").css("display","none");
     $("#msg").text('');
    } 
};

Thanks

Answer 1

In your ajax success callback, you can put the hide command in a setTimeout() for 1500 miliseconds:

success: function(results) {
  setTimeout(function(){
    saveBanner("hide");
  }, 1500);
}

Of course that would merely add 1.5 seconds onto however long the process itself took. Another solution would be to record the time the process started, with the Date object. Then, when the callback takes place, record that time and find the difference. If it's less than a second and a half, set the timeout for the difference.

/* untested */
var start = new Date();
success: function(results) {
  var stop = new Date();
  var difference = stop.getTime() - start.getTime();
  difference = (difference > 1500) ? difference : 1500 ;
  setTimeout(function(){
    saveBanner("hide");
  }, difference);
}

You can perform this math either inside your callback, or within the saveBanner() function itself, within the show portion you would set the starting time, within the hide() portion you would check the difference and set the setTimeout().

Answer 2

You can use setTimeout/clearTimeout to only show the status when the response takes longer than a set amount of time to load.

Edit:

Some untested code:

var t_id = 0;
function on_request_start()
{
    t_id = setTimeout(show_message, 1000);
}
function on_request_completed()
{
    clearTimeout(t_id);
    hide_message();
}

The JQuery handlers should look something like the above. The message will not be shown if you receive a reply in less than a second.

Answer 3

var shownTime;
function saveBanner (action) {

    if (action == 'show') {
        // Display the AJAX Status MSG
        $("#ajaxstatus").css("display","block");
        $("#msg").text('Saving...');
        shownTime = new Date().getTime();
    }
    else if (action == 'hide') {
        var hideIt = function() { 
          $("#ajaxstatus").css("display","none");
          $("#msg").text('');
        };
        var timeRemaining = new Date().getTime() - shownTime - 1500;
        if (timeRemaining > 0) {
             setTimeout(hideIt, timeRemaining);
        else {
             hideIt();
        }
    } 
};