JavaScript Timing Events

From http://www.w3schools.com (Copyright Refsnes Data)

# JavaScript Timing Events

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

## Examples

Simple timing

Another simple timing

Timing event in an infinite loop

Timing event in an infinite loop - with a Stop button

A clock created with a timing event

## JavaScript Timing Events

With JavaScript, it is possible to execute some code NOT immediately after a function is called, but 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.

## setTimeout()

### Syntax

    var t=setTimeout("javascript statement",milliseconds);

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.

Note: There are 1000 milliseconds in one second.

### Example

When the button is clicked in the example below, an alert box will be displayed after 5 seconds.

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

### Example - Infinite Loop

To get a timer to work in an infinite loop, we must write a function that calls itself. In the example below, when the button is clicked, the input field will start to count (for ever), starting at 0:

    <html>
    <head>
    <script type="text/javascript">
    var c=0
    var t
    function timedCount()
    {
    document.getElementById('txt').value=c;
    c=c+1;
    t=setTimeout("timedCount()",1000);
    }
    </script>
    </head>

    <body>
    <form>
    <input type="button" value="Start count!"
    onClick="timedCount()">
    <input type="text" id="txt">
    </form>
    </body>

    </html>

## clearTimeout()

### Syntax

    clearTimeout(setTimeout_variable)

### Example

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:

    <html>
    <head>
    <script type="text/javascript">
    var c=0
    var t

    function timedCount()
    {
    document.getElementById('txt').value=c;
    c=c+1;
    t=setTimeout("timedCount()",1000);
    }

    function stopCount()
    {
    clearTimeout(t);
    }
    </script>
    </head>

    <body>
    <form>
    <input type="button" value="Start count!"
    onClick="timedCount()">
    <input type="text" id="txt">
    <input type="button" value="Stop count!"
    onClick="stopCount()">
    </form>
    </body>

    </html>

From http://www.w3schools.com (Copyright Refsnes Data)