Home > Article > Web Front-end > Explain how timers work in JavaScript

Explain how timers work in JavaScript

WBOYforward: 2023-08-25 10:05:02854browse

解释 JavaScript 中定时器的工作原理

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.

Use the setTimeOut() function to execute code after a specific time

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.

grammar

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.

parameter

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.

return value

setTimeOut() function returns a unique id that we can use to terminate the timer.

Example

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>

Use the setInterval() function to execute this function after each time interval

The

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.

grammar

Users can use the setInterval() function according to the following syntax.

setInterval(callback, interval)

parameter

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.

return value

The setInterval() function also returns a unique id like the setTimeout() function, which we can use to stop the timer.

Example

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>

Use clearTimeOut() and clearInterval() functions to terminate the timer

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.

grammar

// To stop the setTimeOut() function
clearTimeout(TimerId);

// To stop the setInterval() function
clearInterval(TimerId);

parameter

TimerId – It is the unique ID returned by the setTimeOut() or setInterval() function.

Example

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!

JavaScript if count 回调函数

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to add elements horizontally in HTML page using JavaScript?Next article：How to add elements horizontally in HTML page using JavaScript?

See more

Explain how timers work in JavaScript

Use the setTimeOut() function to execute code after a specific time

grammar

parameter

return value

Example

Use the setInterval() function to execute this function after each time interval

grammar

parameter

return value

Example

Use clearTimeOut() and clearInterval() functions to terminate the timer

grammar

parameter

Example

Related articles