JavaScript Timeouts

Previous	Table of Contents	Next
JavaScript Arrays		Building Forms with JavaScript

eBookFrenzy.com

Purchase and download the full PDF version of this JavaScript eBook for only $8.99

In programming it is often necessary to wait a period of time before performing a task, or to set up an activity to repeat at predefined intervals. To address this need JavaScript provides what is known as Timeout support in the Window object. This functionality essentially allows the JavaScript developer to specify in a script that a particular function, or piece of in-line JavaScript should be executed after a specified number of milliseconds have elapsed.

Setting up a JavaScript Timeout

A JavaScript Timeout is specified using the setTimeout() method of the Window object. The setTimeout() method takes the action to be performed (a function call or in-line script) and the time to wait in milliseconds as arguments. The method returns a timeout ID that can subsequently be used to cancel the timeout. The syntax is as follows:

id=window.setTimeout(function, delay);

In the following example an alert dialog will be displayed after 20000 milliseconds:


id=window.setTimeout ("alert('Timed out')", 20000);

It is important to note that all other objects and elements in the window will continue to function while the timeout is counting down. A user will have no indication that a timeout is running in the background while visiting a web page.

Cancelling a JavaScript Timeout

Once a timeout has begun there may be a requirement to cancel it before the specified time expires. This can be achieved using the clearTimeout() together with the ID returned by the call to the setTimeout() method. The following example starts a timeout running and provides a button to enable the timeout to be cleared:


<script language="JavaScript" type="text/javascript">
newWindowObj = window.open ("", "MyWindow");
newWindowObj.blur();

id=window.setTimeout ("alert('Timed out')", 20000);


function cancelTimeout()
{
        window.clearTimeout(id); // Cancel the timeout using the id returned from setTimeout()
}

</script>

<form action="null">
  <input type="button" value="Clear Timeout" onclick="cancelTimeout()" />  
</form>

Setting up JavaScript Timeout to Repeat

You may have noticed that there is no argument to the setTimeout() method to tell JavaScript to repeat the timeout once it has expired. If, once the timeout has triggered, you need to run the timeout again all you need to do is make another call to setTimeout() within the function that was called when the timeout was triggered. We can see this in action by extending our original example. In the example below a function we have named timedout() is called after 10000 milliseconds. After the alert dialog is dismissed by the user the timeout is set up again so that the process will repeat:


<script language="JavaScript" type="text/javascript">

id=window.setTimeout ("timedOut()", 10000);

function timedout()
{
        alert("Timed out");
        id=window.setTimeout ("timedOut()", 10000);
}

</script>

Summary

On completion of this chapter it is intended that the reader will have clear understanding of JavaScript timeouts in terms of both concepts and implementation.