In JavaScript, timers are a very noteworthy feature. Like a normal watch timer, we can start the timer at a certain time and execute a function or code in JavaScript after a specific time.
Simply put, we can use a timer to execute code after a delay. For example, when you visit a website, the registration box will be displayed after 3 to 4 minutes. We can use JavaScript to achieve this. We can set a delay timer to show the registration popup.
Another great example of a timer in real life is in-app advertising. When you open any app, it starts showing ads after 2 to 3 minutes and changes the ads at intervals of 1 to 2 minutes.
So, there are two different functions in JavaScript to set timers, which we will explore in this tutorial.
setTimeOut() The function allows us to execute code after a specific delay. However, it allows us to define delays. It executes the code only once after a specific delay.
When the setTimeOut() function executes, it starts the timer and executes the callback function after a specific delay.
Users can use the setTimeOut() function according to the following syntax.
let timeoutId = setTimeout(callback, delay);
In the above syntax, the callback function can also be executed as an arrow function.
Callback – This is a function that is executed after a delay time.
Delay – Delay is the time (in milliseconds) after which the callback function is executed.
setTimeOut() function returns a unique id that we can use to terminate the timer.
In the example below, when the user clicks the "Start Timer" button, it will call the callTimer() function. The user can see that it prints "the callTimer function was executed first", and after 2000 milliseconds, since the setTimeOut() function called the callback function after 2000 milliseconds, it printed "this function is executed after a delay".
<html>
<body>
<h2> Using the setTimeOut() function </h2>
<div id = "output"> </div>
<button id = "btn" onclick = "callTimer()"> Start Timer </button>
<script>
let output = document.getElementById("output");
output.innerHTML += "Program execution started </br>";
function callTimer() {
output.innerHTML = "The callTimer function executed <br/>";
setTimeout(callback, 2000);
}
function callback() {
output.innerHTML += "This function executed after some delay.";
}
</script>
</body>
</html>
setTimeOut() function only executes the callback function once, but the setInterval() function executes the code setInterval() after each time interval we pass as the second parameter.
Users can use the setInterval() function according to the following syntax.
setInterval(callback, interval)
Callback – This is the function that the setInterval() function calls after each time interval.
Interval – The time in milliseconds after which the callback function is called after each interval.
The setInterval() function also returns a unique id like the setTimeout() function, which we can use to stop the timer.
In this example, we use the setInterval() function to call the callback function every 1000 milliseconds. The user can observe that when the start timer button is pressed, the startInterval() function is executed and the setInterval() function is called. The setInterval() function calls the callback function once every second.
<html>
<body>
<h2> Using the <i> setInterval() </i> function </h2>
<div id = "output"> </div>
<button id = "btn" onclick = "startInterval()"> Start Timer </button>
<script>
let output = document.getElementById("output");
let count = 0;
output.innerHTML += "Program execution started </br>";
// when user clicks on the button, startInterval() function will be called
function startInterval() {
output.innerHTML = "The callTimer function executed <br/>";
// the setInterval() function will call the callback function after every second.
setInterval(callback, 1000);
}
function callback() {
output.innerHTML += "This function executed for " + count + " time </br>";
// update the count to track of howmany times a callback is called.
count = count + 1;
}
</script>
</body>
</html>
After starting the timer, we also need to stop it. We can use the clearTimeOut() function to stop the setTimeOut() function and the clearInterval() function to stop the setInterval() function.
// To stop the setTimeOut() function clearTimeout(TimerId); // To stop the setInterval() function clearInterval(TimerId);
TimerId – It is the unique ID returned by the setTimeOut() or setInterval() function.
In the example below, we use the setInterval() timer function to call the function every second. Additionally, we track the number of times the setInterval() function calls the callback function.
In the callback function, we use the if statement to check if the count is greater than 3, and use the clearInterval() function to terminate the timer.
<html>
<body>
<h2> Using the <i> clearInterval() </i> function </h2>
<div id = "output"> </div>
<button id = "btn" onclick = "startInterval()"> Start Timer </button>
<script>
let output = document.getElementById("output");
let count = 0;
let TimerId = "";
function startInterval() {
TimerId = setInterval(() => {
output.innerHTML += "count = " + count + "<br/>";
count += 1;
if (count > 3) {
clearInterval(TimerId);
}
}, 1000);
}
</script>
</body>
</html>
In the above output, the user can observe that it prints until count = 3 because we terminate the timer when the count is greater than 3.
The above is the detailed content of Explain how timers work in JavaScript. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
