Detailed explanation of JavaScript timers

Brief Introduction

In JavaScript, there are two timers: setInterval() and setTimeout(), each of which has a method to cancel the timer.

These are all window objects, and window can be omitted when calling. These two methods are not in the JavaScript specification.

There are four timer method related methods.

The difference between setTimeout() and setInterval() is that they execute at different times.

Note: setTimeout() is executed only once, while setInterval() is executed periodically at a given interval.

setInterval

describe

setInterval() method can repeatedly call a function or execute a code segment according to a specified period. The period unit is milliseconds.

If setInterval() method is not closed by clearInterval() method or the page is closed, it will continue to be called.

There are multiple parameters for setInterval.

First, if the first parameter is a code segment, then the setInterval() method is optional.

Second, if the first parameter is a function, the setInterval() method can have multiple parameters.

let timerId = setInterval(func|code, delay, arg1, arg2, ...)

parameter

The parameter func|code usually passes in functions. For historical reasons, passing in a code string is supported, but is not recommended.

Return Value

The return value timeoutID is a positive integer, indicating the number of the timer. This value can be passed to clearTimeout() to cancel the timer.

usage

This is an example of clicking a button and incrementing a number every second;

<p id="showNum"></p>
<button onclick="timer()">Click me to increase the number by one every second</button>
 <script>
  const showNum = document.getElementById("showNum");
   let timerId; // Timer ID
  let num = 0;
   function timer() {
    timerId = setInterval(addNum, 1000);
  }
   function addNum() {
    showNum.innerText = `${num++}`;
  }
   // No code to stop the timer is written</script>

setTimeout

describe

setTimeout() returns an integer representing the timer number, which can be used to cancel the timer later.

setTimeout() allows us to defer the execution of a function until a certain interval has passed.

let timerId = setTimeout(func|code, delay, arg1, arg2, ...)

parameter

The parameters of setTimeout() are the same as those of setInterval() .

The parameter func|code usually passes in functions. For historical reasons, passing in a code string is supported, but is not recommended.

usage:

The usage of setTimeout() is the same as setInterval() .
However, unlike setTimeout() which is executed only once, setInterval() is executed periodically according to the specified time.

<p id="showNum"></p>
<button onclick="timer()">After clicking, wait for one second and the number increases by one</button>
 <script>
  const showNum = document.getElementById("showNum");
   let timerId;
  let num = 0;
  addNum();
   function timer() {
    timerId = setTimeout(addNum, 1000);
  }
   function addNum() {
    showNum.innerText = `${num++}`;
  }
 </script>

Cancel timer

The clearInterval() method cancels the timer set by setInterval().

The clearTimeout() method cancels the timer set by setTimeout().

The usage is very simple, with only one parameter, which is timeoutID, the identifier of the timer you want to cancel.
This ID is returned by the corresponding setTimeout() or clearTimeout() call.

clearInterval(intervalID);
clearTimeout(timeoutID);

Note that meout() and setInterval() share the same number pool. Technically, clearTimeout() and clearInterval() are interchangeable. However, to avoid confusion, do not mix the cancel timing functions.

Usage is simple

function timer() {
  timerId = setTimeout(addNum, 1000);
}
 clearTimeout(timerId); // When the code runs to this line, the timer set by timer will be canceled.

Using the timer in the console

You can also use timers in the browser console

console.time(timerName)

Create a timer named name and start it.

Each timer must have a unique name, and a maximum of 10,000 timers can run simultaneously on a page.

console.timeEnd(timerName)

Call console.timeEnd(name) to stop the timer and print the elapsed time in milliseconds.

console.time(timerName);
console.timeEnd(timerName);

usage

Example of how long it takes for a for loop to repeat 99999 times.

console.time(name);
 let num;
for (let index = 0; index < 99999; index++) {
  num++;
}
 console.timeEnd(name);

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!