Figure 1

JavaScript Timers


JavaScript timers allow us to add the dimension of time to our scripts. You can use the setTimeout method to execute code once, when a specified period of time has passed, or the setInterval method can be used to create a loop where the code runs over and over at the interval you specify.

There is also the clearTimeout and clearInterval methods which are used to clear or "cancel" a setTimeout or setInterval operation. For example, you might setup a setInterval operation and then use a setTimeout call that executes clearInterval after a specified period of time to cancel the interval operation.

setTimeout


setTimeout( expression, int milliseconds )

setTimeout and setInterval both take two parameters: 1) the expression/code you want to run; and 2) the number of milliseconds to wait before running the code. You can pretty much do whatever you want in the expression and, as you might expect, pass an integer variable as the milliseconds parameter which creates the possibility for code that dynamically computes the duration to use based on test cases.

Here is a very basic setTimeout() example. From the moment this line runs, a timer starts and then "times out" after 2,000 milliseconds (2 seconds) and runs the code -- in this case, the expression or code to run is a simple alert() that says "Hello World!".

  1. setTimeout("alert('Hello World!')", 2000);


Here is another example that uses a variable in the alert(). The resulting alert output will say "Can you say foobar?".

  1. var saywhat = 'foobar';
  2. setTimeout("alert('Can you say "+saywhat+"?')", 2000);


As mentioned above, you can do whatever you like in the expression area. In this next example I setup a user-defined function called helloWorld, which accepts a string as its only parameter. The string passed is then used in the alert call.

  1. function helloWorld(strParam) {
  2.     alert(strParam);
  3. }
  4.  
  5. setTimeout("helloWorld('Hello, world!')", 2000);


Here we have the same thing but I'm passing a variable.

  1. function helloWorld(strParam) {
  2.     alert(strParam);
  3. }
  4.  
  5. var saywhat = 'Hello, world!';
  6. setTimeout("helloWorld('"+saywhat+"')", 2000);


Again, you can do whatever you want in the expression area. So, if you want to call 2 functions or modify the values of other variables you can. In the following example the sayagain variable is initially set to "foobar", but is changed to "Hello, again!" in the expression area right before the helloAgain() function is called.

  1. function helloWorld(strParam) {
  2.     alert(strParam);
  3. }
  4. function helloAgain(strParam) {
  5.     alert(strParam);
  6. }
  7.  
  8. var saywhat = 'Hello, world!';
  9. var sayagain = 'foobar';
  10. setTimeout(
  11.     "helloWorld('"+saywhat+"');" +
  12.     "sayagain = 'Hello, again!';" +
  13.     "helloAgain(sayagain)",
  14. 2000);


You can also use anonymous functions as this next example demonstrates.

  1. function helloWorld(strParam) {
  2.     alert(strParam);
  3. }
  4. function helloAgain(strParam) {
  5.     alert(strParam);
  6. }
  7.  
  8. var saywhat = 'Hello, world!';
  9. var sayagain = 'foobar';
  10. setTimeout(function() {
  11.     helloWorld(saywhat);
  12.     sayagain = 'Hello, again!';
  13.     helloAgain(sayagain);
  14. }, 2000);


clearTimeout


clearTimeout( timeoutVariable )

Up to this point, we haven't assigned the timers into variables. As you can see above, clearTimeout expects such a variable. Consider the following example, which creates a timer and then immediately clears it (the alert will never execute).

  1. // Create timer, assign to variable
  2. var timer = setTimeout("alert('Hello World!')", 2000);
  3.  
  4. // Clear the timer
  5. clearTimeout(timer);


setInterval


setInterval( expression, int miliseconds )

setInterval works just like setTimeout except that it creates a loop, executing the code over and over at the specified time interval. Often, I find myself using a combination of these set and clear methods to produce the exact behavior I'm in need of.

The following example alerts "Hello, world!" every 2 seconds in an infinite loop. Remember, a setInterval operation will not stop executing until you stop it from doing so with clearInterval.

  1. setInterval("alert('Hello, world!')", 2000);


clearInterval


clearInterval( intervalVariable )

clearInterval works just as clearTimeout above. Here, I setup an interval and then use the setTimeout method that executes clearInterval after 9.5 seconds, terminating the interval operation.

  1. // Alert Hello, world! every 2 seconds
  2. var interval = setInterval("alert('Hello, world!')", 2000);
  3.  
  4. // At 9.5 seconds, clear the interval
  5. setTimeout(function(){
  6.     clearInterval(interval);
  7. }, 9500);


That's it, pretty easy huh?