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

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