CODEWITHSUNDEEP
javascriptjquery
AnApprentice
AnApprentice

Reputation: 111080

jQuery - building a banner with a timeout

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?

Upvotes: 1

Views: 825

Answers (3)

jamesmortensen
jamesmortensen

Reputation: 34078

The problem is you are calling ajaxBanner('hide') in your setTimeout instead of passing in the function reference. Wrapping your ajaxBanner('hide') in an anonymous function will solve the problem:

 setTimeout(function() { ajaxBanner('hide'); }, 2000);

Explanation/Test you can do in your JavaScript Console:

One way to see the difference is to paste this in your Firebug console and run it:

Good:

 // alert fires in 5 seconds
 setTimeout(function() { alert('hide'); }, 5000);

Bad:

 // alert fires right away, despite the 5 second delay
 setTimeout(alert('hide'), 5000);

UPDATE: Note that I am not assigning the setTimeout event to a variable as it's not needed in the above code example in the question.

Upvotes: 2

Fred
Fred

Reputation: 4221

var ajaxBanner_callback = function (){};
function ajaxBanner(action, confirmMsg) {

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

You can do the same to the confirmMsg if you want.

It might be useful investigating into $.queue()

Upvotes: 0

qw3n
qw3n

Reputation: 6334

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.

Upvotes: 2

Related Questions