Delays and timers in Javascript and jQuery

Javascript Timers

Javascript has the ability to make things happen at different times using the setTimeout function. You can even schedule recurring events using the setInterval function. This functionality isn’t jQuery, but you can use these functions in your code to make your interfaces more user friendly.

A basic idea

So, we have a menu bar that appears when you hover over a certain element, and disappears when you move away from that element.

Mouse over me!

And here's the code for this example:

  1. $(document).ready(function(){
  2.   $('#test-box1').hover(
  3.     function(){
  4.       $('#overlay1').animate({height: '30px', opacity: 'show'}, 300);
  5.     },
  6.     function(){
  7.       $('#overlay1').animate({height: '0', opacity: 'hide'}, 300);
  8.   });
  9. });

Making it more useable

As you can see, it works fine, the hover function takes two parameters, the forst for when you hover over an element, the second fires when you move out of it.

The problem is the code is not that clever. Wouldn’t it be nice if the menu bar could stay around for a while, just to give the page a more professional feeling? An extra few hundred milliseconds would give the user the ablitiy to return the the box withut having to wait/watch it hover out then back in.

Well, using the javascript setTimeout function you can!

Mouse over me!

And now the code for this example:

  1. $(document).ready(function(){
  2.   var t = '';
  3.   $('#test-box2').hover(
  4.     function(){
  5.       $('#overlay2').animate({height: '30px', opacity: 'show'}, 300);
  6.     },
  7.     function(){
  8.       var timerCallback = function() {
  9.         $('#overlay2').animate({height: '0', opacity: 'hide'}, 300);
  10.       }
  11.       t = setTimeout(timerCallback, 2000);
  12.     });
  13.   });
  14. });

This new improved code shows us how to create a timeout.

First, we create a variable in the closure's top level scope called t to store the reference to the timeout.

Next, in the mouseleave part of the hover function, we assign the timeout to the t variable.

The call to setTimeout takes two parameters, the code to execute aftetr the elapsed time, and the time (in milliseconds) to execute the function.

Why assign the callback in to t? Well, keep reading!

Clearing Timeouts

The reason we assign t into a top level variable is so we can clear the timeout if needed.

In what situation would we need to clear a timeout?

Well, one such example would be when you hover back over the menu, if you left it by mistake.

Here's how it would look:

Mouse over me!

And again, here's the code:

  1. $(document).ready(function(){
  2.   var t = '';
  3.   $('#test-box3').hover(function(){
  4.       if(t) {
  5.         clearTimeout(timer);
  6.       }
  7.       $('#overlay3').animate({height: '30px', opacity: 'show'}, 300);
  8.     },
  9.     function(){
  10.       var timerCallback = function() {
  11.                $('#overlay3').animate({height: '0', opacity: 'hide'}, 300);
  12.       };
  13.                   t = setTimeout(timerCallback, 2000);
  14.     });
  15.   });
  16. });

As you can see, the main diffrerence here is in the mouseenter part of the hover fuction. It checks if the t variable has been set, if so then it clears it by calling clearTimeout.

This allows you to come back to this box before it fades away, thus making the interface easier to use.

And yes, the code does work in IE6.

Tags

Post new comment

The content of this field is kept private and will not be shown publicly.
CAPTCHA
Are you human? Prove it by typing in the two words below.
Top