JavaScript Timers (Timing)

Timing functions are functions that allow us to execute functions at specific times.

Using timing functions, you can delay the execution of code to avoid completing the code at the exact moment of triggering the event.

There are two timing functions in JavaScript:

• setTimeout(function, milliseconds) -Execute the function(function) after waiting for the specified number of milliseconds

• setInterval(function, milliseconds) -are the same as setTimeout(), but continuously repeat the function(function)

these twosetTimeout()andsetInterval()is a methodWindow object, can be written without the window prefix.

The setTimeout() method

setTimeout()method is used to execute a function or specified code segment once after a period of time.

Syntax:

window.setTimeout(function, milliseconds)

The first parameter is the function to be executed.

The second parameter indicates the number of milliseconds before execution (1seconds = 1000 milliseconds).

The following example executes when the button is clicked:2seconds later, an alert message will be displayed:

<button onclick="setTimeout(myFunc,　2000)">Click</button>/button>
<script>
function myFunc() {
　　alert("Hello World");
}
</script>

Stop executing code

clearTimeout()method stops the execution of the function specified in setTimeout().

Syntax:

window.clearTimeout(var)

clearTimeout()method using the variable returned from setTimeout().

　　t = setTimeout();
　　clearTimeout(t);

If the function has not been executed yet, it can be called throughclearTimeout()This method is used to stop the execution.

The same as the above example, but with an 'Stop' button added:

<button onclick="myFunc()">Click</button>/button>
<button onclick="myStopFunc()">Stop the alert</button>/button>
<script>
var t;
function myFunc() {
　　t = setTimeout(function() { alert("Hello world"); },　2000);
}
function myStopFunc() {
　　clearTimeout(t);
}
</script>

The setInterval() method

setInterval()This method repeatedly calls a function with a fixed time delay between each call.

Syntax:

window.setInterval(function, milliseconds)

The first parameter is the function to be executed.

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

This example executes a function called 'startTimer' once per second (like a digital watch):

//Every1Run startTimer() once per second
setInterval(startTimer,　1000);
function startTimer() {
　　var date = new Date();
　　document.getElementById("result").innerHTML = date.toLocaleTimeString();
}

Stop executing code

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

Syntax:

window.clearInterval(var)

clearInterval()Use the variable returned from setInterval() in the method.

　　t = setInterval();
　　clearInterval(t);

The same as the above example, but with an 'Stop' button added:

//Every1Run startTimer() once per second
var t = setInterval(startTimer,　1000);
function startTimer() {
　　var date = new Date();
　　document.getElementById("result").innerHTML = date.toLocaleTimeString();
}
//Cancel the repeated action created by setInterval()
function stopTimer() {
　　　clearInterval(t);
}

More Examples

Click the 'Start Counting' button below to start the timer. Click the 'Stop Counting' button to stop counting:

Click the 'Start Progress' button below to start the progress bar. Click the 'Stop Progress' button to stop the progress bar: