Date() object and Timers

Timers

As you get more familiar with Javascript and the different browsers, you will probably notice some dynamic HTML moving around parts of Web pages. The majority of the time, this is being achieved with timers. Timers execute a set of code sometime in the future. It's easy to set up a timer in JavaScript. The setTimeout() method of the windows object lets you execute a JavaScript function aafter a delay (in milliseconds). Think of the setTimeout() method as a way to schedule a task for the browser ot perform later. The setTimeout() method generates an ID number to identify the task. You can store the ID in a variable so you can cancel the scheduled task with a call to the clearTimeout() method. The setTimeout() method of the windows object accepts two parameters, some set of code and when it should be executed in the future. The clearTimeout() method cancels the setTimeout, you just pass the ID that needs to be canceled.

Basically the format for setTimeout is.

var the_Timeout_Name = setTimeout("some javascript statement", some_milliseconds);


To cancel the timer:
clearTimeout(the_Timeout_Name);


The setInterval() method of the window object is similar to the setTimeout() method. The setTimeout() method schedules a task to be executed once after a given delay. The setInterval() method schedules a task to be executed repeatedly with a given delay between repetitions. Just like the setTimeout() method, the setInterval task can be canceled using the clearInterval() method. The setInterval() is supported by browsers with version numbers 4 and higher.

  1. This example increments a variable and displays it to the screen. The variable is set to 0. Once you click on the link it calls the function countUp() that increments the counter, displays it on the screen, then sets the timer to call the function again in 50 milliseconds.

    The link has an onClick event that initially calls the function.

    <a href="javascript:countUp();">


    Within the the countUp() function, create a timer to call the countUp() function again in 50 milliseconds.
    setTimeout("countUp()",50);


    Click here to see the example

  2. In Class 6 we had a demo for a clock. It displayed either military time or regular time depending on which radio button was clicked. I have taked the code that displays the regular time, and made it into a function that displays the time in a field on a form. I then added a timer that will call the function every second.

    For this demo, we want the current time to be displayed as soon as the page opens and continually update the time. So, first we call the function to cretate the time. call the function from the onLoad event of the page, but adding the function to the <body> tag.

    <body onLoad="showRegularTime();">


    After the function creates the time and puts it on the screen, set a timer to call the function in about half a second to update the time and display it to the screen. To do this we add the following code to the end of the function.
    theTimer = setTimeout('showRegularTime();',500);


    This code will call the showRegularTime() function in 500 milliseconds.

    Click here to see the example

    This example could have also been done using setInterval() method. Click here to see the example

  3. use the onClick event of a check box to start and stop a timer. If the check box is checked execute a function to cycle through some images in an array. If the check box is not checked then don't fire off the function to cycle through the images. There is a short explanation on the page.

    Click here to see the example

  4. Use a timer to send the user an alert message.

    In this example we want to remind the user that if they take our survey, they can save an additional 5%. However if they click on the survey to take it, we want to cancel the timer that displays the message. The timer is set in the JavaScipt at the top of the page.

    var the_timeout = setTimeout("alertMessage();",3000);


    The function alertMessage() will be executed in 3000 milliseconds or about 3 seconds after the page loads. The variable the_timeout is a global variable that we can use later to cancel the timer if we need to. There is a link on the page that allows the user to click and take the survey. If the user clicks the link we want to cancel the timer so it does not remind the user to take the survey.

    <a href="#" onClick="clearTimeout(the_timeout);">Click here</a>

    Try viewing this example. If you wait you will see the alert message. Refresh the page and click the link for the survey and you will not see the alert message. Click here to see the example

  5. You can also use a timer to update a css style. In this example by Danny Goodman, a span tag is used to give some text a style. A timer is used to change the style, giving the text the appearence of flashing. Click here to see the example

  6. You can also use a timer to update the text in a div tag. In this example from Dynamic Drive, a div tag is used to display some text. A timer is used to change the text, giving the window the appearence of a Flash application. Click here to see the example