Of Stack

Detailed Explanation of JavaScript Timer

  • 2021-12-05 05:32:09
  • OfStack
Directory Brief Introduction setInterval Description Parameter Return Value Usage setTimeout Description Parameter Usage: Cancel timer Use Timer console. time (timerName) console. timeEnd (timerName) Usage Summary

Brief introduction

In JavaScript, there are two timers, setInterval () and setTimeout (), and there are methods to cancel the timer.

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

There are four related methods of timer method.

方法 描述
setInterval 周期性地调用1个函数(function)或者执行1段代码。
clearInterval 取消掉用setInterval设置的重复执行动作。
setTimeout 在指定的延迟时间之后调用1个函数或者执行1个代码片段。
clearTimeout 方法可取消由 setTimeout() 方法设置的 timeout。

setTimeout() And setInterval() The difference is that they are executed differently.

Note: setTimeout () is executed only once setInterval () is executed periodically at given intervals.

setInterval

Describe

setInterval() Method can repeatedly call a function or execute a code snippet at a specified period. The period is in milliseconds.

setInterval() Method if it is not clearInterval() Method closes or the page closes, then 1 will be called straight.

setInterval has multiple parameters.

First, if the first parameter is a code snippet, the setInterval () method can be optionally filled.

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


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

Parameter

参数 必/选填 描述
func | code 必填 调用的函数后要执行的函数或代码字符串
delay 必填 执行代码前所需的时间，单位为毫秒，可以不填，默认值是 0
arg1，arg2… 选填 要传入被执行函数（或代码字符串）的参数列表（IE9 以下不支持）

Parameter funccode 1 is passed in as a function. For some historical reasons, passing in code strings is supported, but it is not recommended.

Return value

The return value timeoutID is a positive integer representing 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 every 1 second, adding a number to 1; 


<p id="showNum"></p>
<button onclick="timer()"> Point my number per second plus 1</button>
 <script>
  const showNum = document.getElementById("showNum");
   let timerId; //  Timer's ID
  let num = 0;
   function timer() {
    timerId = setInterval(addNum, 1000);
  }
   function addNum() {
    showNum.innerText = `${num++}`;
  }
   //  Stop timer code not written 
</script>

setTimeout

Describe

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

setTimeout() Allows us to postpone the execution of the function until after 1 time interval. 


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

Parameter

setTimeout() Parameters here and setInterval() The parameter of is 1.

参数 必/选填 描述
func | code 必填 调用的函数后要执行的函数或代码字符串
delay 必填 执行代码前所需的时间，单位为毫秒，可以不填，默认值是 0
arg1，arg2… 选填 要传入被执行函数（或代码字符串）的参数列表（IE9 以下不支持）

Parameter func|code 1 is passed in as a function. For some historical reasons, passing in code strings is supported, but it is not recommended.

Usage:

setTimeout() Usage and setInterval() It's one kind,
But setTimeout() Execute only once different, setInterval() Is executed periodically according to the specified time. 


<p id="showNum"></p>
<button onclick="timer()"> After clicking, wait 1 Number of seconds plus 1</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 timer set by setInterval ().

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

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


clearInterval(intervalID);
clearTimeout(timeoutID);

Note that setTi meout() And setInterval() Sharing one numbering pool, clearTimeout () and clearInterval () are technically interchangeable. However, to avoid confusion, do not mix the cancellation timing function.

The usage is very simple 


function timer() {
  timerId = setTimeout(addNum, 1000);
}
 clearTimeout(timerId); //  When the code runs to this line, it cancels timer The timer that is set.

Using a timer in the console

You can also use a timer in the browser console

console.time(timerName)

Create a timer named name and start timing.

Every 1 timer must have only 1 name, and a maximum of 10,000 timers can run simultaneously on the page.

console.timeEnd(timerName)

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


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

Usage

for loop 99999 times how much time sample. 


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

Summarize

This article is here, I hope to give you help, but also hope that you can pay more attention to this site more content!

Related articles: