Creating Timed Events | Inside JavaScript

On occasion, it can be useful to have the browser call your code at a later time, as when you want to display scrolling text in the status bar or display a clock. JavaScript gives you two ways to do thisusing the setInterval / clearInterval methods and the setTimeout / clearTimeout methods.

You use setInterval to set the interval (measured in milliseconds , 1/1000ths of a second) between repeated calls to your code and setTimeout to set a length of time after which the browser will call your code. That is, setInterval is designed to be used for repeated calls, and setTimeout just for a single call sometime in the future. In practice, however, setTimeout , which was introduced before setInterval , is often used for repeated calls as well.

The setInterval method returns an interval ID (an integer), which you can pass to clearInterval to stop the repeated calls; and the setTimer method returns a timer ID (also an integer), which you can pass to clearTimeout to cancel the future call to your code. Here's how to use both methods:

 window.setTimeout(  code  ,  milliSeconds  [,  language  ])  window.setInterval(  code  ,  milliSeconds  [,  language  ])

Here are the arguments for these methods:

code . The function or string that holds the code to be executed when the specified time has elapsed.
milliSeconds . Integer that specifies the number of milliseconds to wait.
language . Internet Explorer only. String that specifies one of the following values: "JScript" , "VBScript" , "JavaScript" .

We've already seen the setTimeout method to display scrolling text in the browser's status bar in Chapter 7 like this (Listing 07-01.html on the web site):

 <HTML>      <HEAD>          <TITLE>Scrolling Status Bar Text</TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--  var text = "Hello from JavaScript! Hello from JavaScript! "   function scroller()   {   window.status = text   text = text.substring(1, text.length) + text.substring(0, 1)   setTimeout("scroller()", 150)   }  // -->          </SCRIPT>      </HEAD>  <BODY onLoad="scroller()">  <H1>Scrolling Status Bar Text</H1>      </BODY>  </HTML>

Here's an example that uses setInterval and clearInterval to display a clock, updated every second. To do that, this example uses the Date object's toLocaleTimeString method (not available in NS4 or earlier) that we'll see in Chapter 18, "The Date , Time , and String Objects"this method returns a string with the local time. If the user wants to stop the clock, she just has to click the button to use the clearInterval method (to start the clock again, you have to use setInterval to get a new interval ID):

(Listing 08-09.html on the web site)

 <HTML>      <HEAD>          <TITLE>              Using setInterval and clearInterval          </TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--  var intervalID = ""   intervalID = window.setInterval("showTime()", 1000)   function showTime()   {   var d = new Date()   document.form1.text1.value = d.toLocaleTimeString()   }   function stopCounting()   {   window.clearInterval(intervalID)   }  // -->          </SCRIPT>      </HEAD>      <BODY>          <H1>Using setInterval and clearInterval</H1>           <FORM NAME="form1">              <INPUT TYPE="TEXT" NAME="text1">              <INPUT TYPE="BUTTON" VALUE="Stop counting" ONCLICK="stopCounting()">          </FORM>      </BODY>  </HTML>

You can see the results in Figure 8.8.

Figure 8.8. Displaying a clock.

graphics/08fig08.gif

You also can pass arguments to setInterval and setTimeout to be passed to a called function. The Netscape Navigator 4+ enables you to pass a list of comma-separated arguments to be passed to the function you're calling like this: setInterval(dataCrunch, 1000, value1 , value2) , where value1 and value2 will be passed to the dataCrunch function. (Note that the first argument is just the dataCrunch function name, without quotes and without parentheses.) For cross-browser compatibility, however, here's a better way:

 interval = setInterval("dataCrunch(" + value1 + ", " + value2 + ")", 1000)