JavaScript Timing Events
JavaScript can execute code at specified time intervals, known as timing events.
Timing Events
The window object allows the execution of code at specified time intervals. The two key methods are:
- setTimeout(function, milliseconds): Executes a function after waiting a specified number of milliseconds.
- setInterval(function, milliseconds): Repeats the execution of a function continuously at specified time intervals.
These methods are part of the HTML DOM Window object.
The setTimeout() Method
The setTimeout() method executes a function after a specified number of milliseconds.
Syntax
window.setTimeout(function, milliseconds);
The window.setTimeout() method can be called without the window prefix. The first parameter is the function to be executed, and the second parameter is the number of milliseconds to wait before execution.
Example
Click a button, wait 3 seconds, and the page will alert "Hello":<button onclick="setTimeout(myFunction, 3000)">Try it</button><script>function myFunction() { alert('Hello');}</script>
Stopping the Execution
The clearTimeout() method stops the execution of the function specified in setTimeout().
Syntax
window.clearTimeout(timeoutVariable);
he window.clearTimeout() method can be called without the window prefix. It uses the variable returned from setTimeout():
let myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);
Example
Same example as above, but with an added "Stop" button:
<button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button><button onclick="clearTimeout(myVar)">Stop it</button>
The setInterval() Method
The setInterval() method repeats a given function at specified time intervals.
Syntax
window.setInterval(function, milliseconds);
The window.setInterval() method can be called without the window prefix. The first parameter is the function to be executed, and the second parameter is the length of the time interval between each execution.
Example
Display the current time every second:
<p id="demo"></p><script>setInterval(myTimer, 1000);function myTimer() { const d = new Date(); document.getElementById("demo").innerHTML = d.toLocaleTimeString();}</script>There are 1000 milliseconds in one second.
Stopping the Execution
The clearInterval() method stops the execution of the function specified in the setInterval() method.
Syntax
window.clearInterval(timerVariable);The window.clearInterval() method can be called without the window prefix. It uses the variable returned from setInterval():let myVar = setInterval(function, milliseconds);clearInterval(myVar);
Example
Same example as above, but with a "Stop time" button:
<p id="demo"></p><button onclick="clearInterval(myVar)">Stop time</button><script>let myVar = setInterval(myTimer, 1000);function myTimer()
{
const d = new Date(); document.getElementById("demo").innerHTML = d.toLocaleTimeString();}
</script>
