bugl
bugl
HomeLearnPatternsSearch
HomeLearnPatternsSearch

Loading lesson path

Learn/JavaScript/DOM and Browser APIs
JavaScript•DOM and Browser APIs

JavaScript Timing Events

Timing Events let you run code:

After a Delay

Or Repeatedly

Timing is driven by

Timing Events generated by the system clock.

Timer Fuctions

Function

Description setTimeout()

Sets a clock timeout (runs once) setInterval() Sets a clock interval (runs repeatedly) clearTimeout()

Clears a timeout clearInterval()

Clears an inteval

The timer functions belong to the window object. setTimeout() is the same as window.setTimeout().

A Clock

Example

<p id="clock"></p> <script>

// Call showTime every 1000 millisec setInterval(showTime, 1000);
// Fuction to display the time function showTime() {
const d = new Date();
document.getElementById("clock").innerHTML =
d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
}

</script>

The setTimeout() Method

The setTimeout()

method executes a function after a delay in milliseconds. setTimeout( function, delay, p1,...,pN )

Parameters

Parameter

Description function

Required. The function to be called when the timer expires. delay Optional. The milliseconds the timer should wait. Defalt 0 (immediately). p1,...,pN Optional. Arguments passed to the function.

Return Value

Type

Description

Integer

An integer that uniquely identifies the timer. This "timeout ID" can later be passed to clearTimeout() to cancel the timer.

Example

<button id="btn">Start</button> <p id="demo"></p> <script>

// let btn listen for a click document.getElementById("btn").addEventListener("click", function () {
// Then call showMsg after 2 seconds setTimeout(showMsg, 2000);
});
// Function to display message function showMsg() {
document.getElementById("demo").innerHTML = "Hello after 2 seconds!";
}

</script>

The setTimeout()

method is a core part of asynchronous JavaScript, allowing code execution to be scheduled without blocking the main execution thread.

The SetInterval()Method

The setInterval()

method calls a function repeatedly. setInterval( function, delay, p1,...,pN )

Previous

JavaScript Load Events

Next

JavaScript Event Management