JavaScript Timing Event

JavaScript can execute within time intervals.

This is what is called a timing event (Timing Events).

Timing Events

The Window object allows code to be executed at specified time intervals.

These time intervals are called timing events.

are two key methods used by JavaScript:

setTimeout(function, milliseconds)
executes the function after waiting for the specified number of milliseconds.
setInterval(function, milliseconds)
equivalent to setTimeout(), but continuously repeats the execution of the function.

setTimeout() and setInterval() are all methods of the HTML DOM Window object.

setTimeout() method

window.setTimeout(function, milliseconds);

window.setTimeout() The method can be without window write with a prefix.

The first parameter is the function to be executed.

The second parameter indicates the number of milliseconds before execution.

Example

Click the button. Wait 3 seconds, and then a prompt "Hello" will appear on the page:

<button onclick="setTimeout(myFunction, 3000)">Try It</button>
<script>
function myFunction() {
    alert('Hello');
 }
</script>

Try It Yourself

How to stop the execution?

clearTimeout() method stops executing setTimeout() the function specified in the rule.

window.clearTimeout(timeoutVariable)

window.clearTimeout() The method can be without window write with a prefix.

clearTimeout() using from setTimeout() Returned Variable:

myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);

Example

Similar to the previous example, but with an 'Stop' button:

<button onclick="myVar = setTimeout(myFunction, 3000)">Try It</button>
<button onclick="clearTimeout(myVar)">Stop Execution</button>

Try It Yourself

setInterval() method

setInterval() The method repeats the given function at each given time interval.

window.setInterval(function, milliseconds);

window.setInterval() The method can be without window write with a prefix.

The first parameter is the function to be executed.

The second parameter is the length of the time interval between each execution.

In this example, the function "myTimer" is executed once per second (like a digital watch).

Example

Display the current time:

var myVar = setInterval(myTimer, 1000);
function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}

Try It Yourself

One second has 1000 milliseconds.

How to stop the execution?

clearInterval() method stops setInterval() execution of the function specified in the method.

window.clearInterval(timerVariable)

window.clearInterval() method can be written without the window prefix.

clearInterval() method uses from setInterval() Returned Variable:

myVar = setInterval(function, milliseconds);
clearInterval(myVar);

Example

Similar to the previous example, but we add a 'Stop Time' button:

<p id="demo"></p>
<button onclick="clearInterval(myVar)">Stop Time</button>
<script>
var myVar = setInterval(myTimer, 1000);
 function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>

Try It Yourself

More Examples

Another simple countdown
Clock created by countdown timer