JavaScript Timing

JavaScript Timing Events

JavaScript Timing Events

With JavaScript, it is possible to execute some code after a specified time-interval. This is called timing events.

It's very easy to time events in JavaScript. The two key methods that are used are:

* setTimeout() - executes a code some time in the future
* clearTimeout() - cancels the setTimeout()

Note: The setTimeout() and clearTimeout() are both methods of the HTML DOM Window object.

The setTimeout Method

The setTimeout() method returns a value - In the statement above, the value is stored in a variable called t. If you want to cancel this setTimeout(), you can refer to it using the variable name.

The first parameter of setTimeout() is a string that contains a JavaScript statement. This statement could be a statement like "alert('5 seconds!')" or a call to a function, like "alertMsg()".

The second parameter indicates how many milliseconds from now you want to execute the first parameter.

Example:

<html>

<head>

<script type="text/javascript">

function timedMsg()

{

var t=setTimeout("alert('5 seconds!')",5000);

}

</script>

</head>



<body>

<form>

<input type="button" value="Display timed alertbox!"

onClick="timedMsg()" />

</form>

</body>

</html>

The clearTimeout Method

The example below is the same as the "Infinite Loop" example above. The only difference is that we have now added a "Stop Count!" button that stops the timer:

Example:

<html>

<head>

<script type="text/javascript">

var c=0;

var t;

var timer_is_on=0;



function timedCount()

{

document.getElementById('txt').value=c;

c=c+1;

t=setTimeout("timedCount()",1000);

}



function doTimer()

{

if (!timer_is_on)

  {

  timer_is_on=1;

  timedCount();

  }

}



function stopCount()

{

clearTimeout(t);

timer_is_on=0;

}

</script>

</head>



<body>

<form>

<input type="button" value="Start count!" onClick="doTimer()">

<input type="text" id="txt">

<input type="button" value="Stop count!" onClick="stopCount()">

</form>

</body>

</html>

JavaScript Timing