Detailed Explanation of JavaScript Timer
- 2021-12-05 05:32:09
- OfStack
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!