current position:Home>Dry goods | RAF replaces setTimeout_ setInterval
Dry goods | RAF replaces setTimeout_ setInterval
2021-08-27 10:20:20 【Weibo front end】
Preface
Why requestAnimationFrame
Instead of setInterval
and setTimeout
? You have to understand the micro task first 、 Macro task and Event-Loop
, also setInterval
The problem is
requestAnimationFrame
window.requestAnimationFrame() Tell the browser —— You want to perform an animation ,
It also requires the browser to invoke the specified callback function before updating the animation next time . This method needs to pass in a callback function as a parameter , This callback function will execute before the next redraw of the browser
If you want to update the next frame of animation before the browser redraw next time , Then the callback function itself must call... Again window.requestAnimationFrame()
grammar
window.requestAnimationFrame(callback);
- callback The function called to update the animation frame before the next redraw ( That is the callback function mentioned above ). The callback function will be passed Enter into
DOMHighResTimeStamp
Parameters , The parameter andperformance.now()
The return value of is the same , It saidrequestAnimationFrame()
open The moment when the callback function starts to execute . - Return value One
long
Integers , requestID
, Is the unique identifier in the callback list . It's a non-zero value , Nothing else . You can pass this value towindow.cancelAnimationFrame()
To cancel the callback function .
Understand micro tasks 、 Macro task and Event-Loop
Micro task _ Macro task and Event-Loop
Operating mechanism
setTimeout
setTimeout(function(){
console.log(1);
});
console.log(0);
Copy code
actually , hold setTimeout
The second parameter of is set to 0s
, It doesn't mean to execute the function immediately , Just put the function on the asynchronous queue . The browser first executes the tasks in the synchronization queue , Will execute the tasks in the asynchronous queue
In the following example , Give me a button btn
Set up an event handler . The event handler sets a 250ms
The timer after invoking . After clicking this button , First of all, will onclick
Event handler joins the queue . The timer is set after the program is executed , There's more 250ms after , The specified code is added to the queue for execution
btn.onclick = function(){
setTimeout(function(){
console.log(1);
},250);
}
Copy code
If... In the code above onclick
The event handler executed 300ms
, Then the timer code should be at least after the timer is set 300ms
And then it's executed . All in the queue Your code has to wait until javascript
The process cannot be executed until it is idle , And no matter how they are added to the queue
setInterval
Use setInterval()
The problem is , The timer code may not have finished executing before the code is added to the queue again , The result is that the timer code runs several times in a row , And there was no pause . and javascript
The engine's solution to this problem is : When using setInterval()
when , Only if there is no other code instance of the timer , To add the timer code to the queue . This ensures that the timer code The minimum time interval for adding to the queue is the specified interval
however , This leads to two problems :1、 Some intervals are skipped ;2、 The interval between code execution of multiple timers may be smaller than expected
hypothesis , Some onclick
Used by event handlers setInterval()
Set up 200ms
Interval timer . If the event handler spends 300ms
A little more time to finish , At the same time, the timer code also took a lot of time More time , There will also be cases of skipping an interval
The first timer in the example is in
205ms
Added to the queue at , But until after 300ms
Only when we can carry out . When this timer code is executed , stay 405ms
And then to the queue Added another copy . At the next interval , namely 605ms It's about , The first timer code is still running , At the same time, there is already a timing in the queue An example of the handler code . The result is , The timer code at this point in time will not be added to the queue
iteration setTimeout Realization setInterval
Some companies will disable setInterval
for fear of setInterval()
Timer problem , You can use chain setTimeout()
call
setTimeout(function fn(){
setTimeout(fn,interval);
},interval);
Copy code
simulation setInterval/setTimeout Basic use of
RAF
class RAF {
constructor () {
this.init()
}
init () {
this._timerIdMap = {
timeout: {},
interval: {}
}
}
run (type = 'interval', cb, interval = 16.7) {
const now = Date.now
let stime = now()
let etime = stime
// establish Symbol Type as key value , Ensure the uniqueness of the returned value , Used to clear the timer
const timerSymbol = Symbol()
const loop = () => {
this.setIdMap(timerSymbol, type, loop)
etime = now()
if (etime - stime >= interval) {
if (type === 'interval') {
stime = now()
etime = stime
}
cb()
type === 'timeout' && this.clearTimeout(timerSymbol)
}
}
this.setIdMap(timerSymbol, type, loop)
return timerSymbol // return Symbol Make sure that every time you call setTimeout/setInterval The uniqueness of the return value
}
setIdMap (timerSymbol, type, loop) {
const id = requestAnimationFrame(loop)
this._timerIdMap[type][timerSymbol]= id
}
setTimeout (cb, interval) { // Realization setTimeout function
return this.run('timeout', cb, interval)
}
clearTimeout (timer) {
cancelAnimationFrame(this._timerIdMap.timeout[timer])
}
setInterval (cb, interval) { // Realization setInterval function
return this.run('interval', cb, interval)
}
clearInterval (timer) {
cancelAnimationFrame(this._timerIdMap.interval[timer])
}
}
Copy code
Use
var raf = new RAF()
var timer1 = raf.setInterval(() =>{
console.log(1000)
}, 1000)
var timer2 = raf.setInterval(() =>{
console.log(1500)
}, 1500)
raf.setTimeout(() => {
raf.clearInterval(timer1)
raf.clearInterval(timer2)
}, 6000)
Copy code
Calculate the computer refresh rate
// Calculate out of the question requestAnimationFrame refresh frequency
let startTime = Date.now()
let timer = null
let arr = []
function calc () {
timer = requestAnimationFrame(calc)
const nowTime = Date.now()
const diff = nowTime - startTime
startTime = nowTime
arr.push(diff)
}
calc()
setTimeout(() => {
const newArr = arr.filter(v => v > 10)
console.log(newArr)
const total = newArr.reduce((t, i) => t + i, 0)
console.log(' Average refresh times ', 1000 / (total / newArr.length)) // Average refresh times 60.00670465973852
cancelAnimationFrame(timer)
}, 3000)
Copy code
quote
- requestAnimationFrame
- In depth understanding of timer series 1 —— understand setTimeout and setInterval
- RAF replace setTimeout/setInterval
more
copyright notice
author[Weibo front end],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827102017506n.html
The sidebar is recommended
- Crazy blessing! Tencent boss's "million JVM learning notes", real topic of Huawei Java interview 2020-2021
- JS JavaScript how to get the subscript of a value in the array
- How to implement injection in vuex source code?
- JQuery operation select (value, setting, selected)
- One line of code teaches you how to advertise on Tanabata Valentine's Day - Animation 3D photo album (music + text) HTML + CSS + JavaScript
- An article disassembles the pyramid architecture behind the gamefi outbreak
- BEM - a front-end CSS naming methodology
- [vue3] encapsulate custom global plug-ins
- Error using swiper plug-in in Vue
- Another ruthless character fell by 40000, which was "more beautiful" than Passat and maiteng, and didn't lose BMW
guess what you like
-
Huang Lei basks in Zhang Yixing's album, and the relationship between teachers and apprentices is no less than that in the past. Netizens envy Huang Lei
-
He was cheated by Wang Xiaofei and Li Chengxuan successively. Is an Yixuan a blessed daughter and not a blessed home?
-
Zhou Shen sang the theme song of the film "summer friends and sunny days" in mainland China. Netizen: endless aftertaste
-
Pink is Wangyuan online! Back to the peak! The new hairstyle is creamy and sassy
-
Front end interview daily 3 + 1 - day 858
-
Spring Webflux tutorial: how to build reactive web applications
-
[golang] walk into go language lesson 24 TCP high-level operation
-
August 23, 2021 Daily: less than three years after its establishment, Google dissolved the health department
-
The female doctor of Southeast University is no less beautiful than the female star. She has been married four times, and her personal experience has been controversial
-
There are many potential safety hazards in Chinese restaurant. The top of the program recording shed collapses, and the artist will fall down if he is careless
Random recommended
- Anti Mafia storm: He Yun's helpless son, Sun Xing, is destined to be caught by his dry son
- Introduction to flex flexible layout in CSS -- learning notes
- CSS learning notes - Flex layout (Ruan Yifeng tutorial summary)
- Today, let's talk about the arrow function of ES6
- Some thoughts on small program development
- Talk about mobile terminal adaptation
- Unwilling to cooperate with Wang Yibo again, Zhao Liying's fans went on a collective strike and made a public apology in less than a day
- JS function scope, closure, let, const
- Zheng Shuang's 30th birthday is deserted. Chen Jia has been sending blessings for ten years. Is it really just forgetting to make friends?
- Unveil the mystery of ascension
- Asynchronous solution async await
- Analysis and expansion of Vue infinite scroll source code
- Compression webpack plugin first screen loading optimization
- Specific usage of vue3 video play plug-in
- "The story of huiyeji" -- people are always greedy, and fairies should be spotless!
- Installing Vue devtool for chrome and Firefox
- Basic usage of JS object
- 1. JavaScript variable promotion mechanism
- Two easy-to-use animation JS that make the page move
- Front end Engineering - scaffold
- Java SQL Server intelligent fixed asset management, back end + front end + mobile end
- Mediator pattern of JavaScript Design Pattern
- Array de duplication problem solution - Nan recognition problem
- New choice for app development: building mobile applications using Vue native
- New gs8 Chengdu auto show announces interior Toyota technology blessing
- Vieira officially terminated his contract and left the team. The national security club sent blessings to him
- Less than 200000 to buy a Ford RV? 2.0T gasoline / diesel power, horizontal bed / longitudinal bed layout can be selected
- How does "heart 4" come to an end? Pinhole was boycotted by the brand, Ma Dong deleted the bad comments, and no one blessed him
- We are fearless in epidemic prevention and control -- pay tribute to the front-line workers of epidemic prevention!
- Front end, netty framework tutorial
- Xiaomi 11 | miui12.5 | android11 solves the problem that the httpcanary certificate cannot be installed
- The wireless charging of SAIC Roewe rx5 plus is so easy to use!
- Upload and preview pictures with JavaScript, and summarize the most complete mybatis core configuration file
- [25] typescript
- CSS transform Complete Guide (Second Edition) flight.archives 007
- Ajax foundation - HTTP foundation of interview essential knowledge
- Cloud lesson | explain in detail how Huawei cloud exclusive load balancing charges
- Decorator pattern of JavaScript Design Pattern
- [JS] 10. Closure application (loop processing)
- Left hand IRR, right hand NPV, master the password of getting rich