Setinterval, setTimeout and requestanimationframe

setTimeout

 

setTimeout

Delay execution of a piece of code , but

setTimeout

because

EventLoop

The existence of , Not 100% on time , One

setTimeout

It may be expressed in the following form ：

//  Time delay 1s after , Print hello,world
setTimeout(() => {
 console.log('hello,world');
}, 1000)


setInterval：

 

setInterval

Within a specified time , Repeat a piece of code , And

setTimeout

similar , It's not on time , And sometimes it is not recommended

setInterval

Timer , Because it works with some time-consuming code , There will be problems of execution accumulation , It will wait until the time-consuming operation is over , One or more execution timers together , There are performance issues . One

setInterval

It may be expressed in the following form ：

setInterval(() => {
 console.log('hello,world');
}, 1000)


requestAnimationFrame：

  Request animation frame , It is html5 Designed specifically for requesting animation API, It is associated with

setTimeout

Compared with the following advantages ：

• According to the refresh rate of different screens , Automatically adjust the timing of executing the callback function .

• When the window is inactive ,
  requestAnimationFrame
  Will stop executing , and
  setTimeout
  Can't

• It has function throttling function

var progress = 0;
var timer = null;
function render() {
 progress += 1;
 if (progress <= 100) {
 console.log(progress);
 timer = window.requestAnimationFrame(render);
 } else {
 cancelAnimationFrame(timer);
 }
}
// First frame rendering
window.requestAnimationFrame(render);

If you reprint , Please indicate the source ： Open source byte    https://sourcebyte.cn/article/171.html