View source for JavaScript Timeouts

<table border="0" cellspacing="0" width="100%">
<tr>
<td width="20%">[[JavaScript Arrays|Previous]]<td align="center">[[JavaScript Essentials|Table of Contents]]<td width="20%" align="right">[[Building Forms with JavaScript|Next]]</td>
<tr>
<td width="20%">JavaScript Arrays<td align="center"><td width="20%" align="right">Building Forms with JavaScript</td>
</table>
<hr>


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:

<pre>

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

</pre>

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:

<pre>

<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>

</pre>

== 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:

<pre>

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

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

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

</script>

</pre>

== 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.


<hr>
<table border="0" cellspacing="0" width="100%">
<tr>
<td width="20%">[[JavaScript Arrays|Previous]]<td align="center">[[JavaScript Essentials|Table of Contents]]<td width="20%" align="right">[[Building Forms with JavaScript|Next]]</td>
<tr>
<td width="20%">JavaScript Arrays<td align="center"><td width="20%" align="right">Building Forms with JavaScript</td>
</table>
<hr>