Question

I want to build a banner that says “Loading”, and hides when the application is done.

<div id="ajaxBanner"></div>


function ajaxBanner(action, confirmMsg) {

    if (action == 'show') {
        $('#msg').text('Loading...');
        $('#ajaxBanner').show();
    } else if (action == 'hide') {
        $('#ajaxBanner').fadeOut();
    } else if (confirmMsg == true) {
        $('#ajaxBanner').show();
        ajaxBanner_timeout = setTimeout(ajaxBanner('hide'), 2000);
    }
};

The function shows a “Loading” banner message to the user and later hides it. The thing is, I also want to use this space for confirmation messages, like “XXXX Added to XXX”.

The problem is, when confirmMsg is true, it is getting killed by a subsequent AJAX call with does Action show.

How can I say only do action==show or action==hide when the ajaxBanner_timeout is complete?

Answer 1

One problem is setTimeout() does not take a function call it takes a string or an anonymous function try setTimeout("ajaxBanner('hide')", 2000);. Right now the function is immediately called no pause. Another method is

setTimeout(function(){
  //do something;
},2000);

Note this is the better way.