Setinterval, setTimeout and requestanimationframe

setTimeoutsetTimeout 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 ：

1. According to the refresh rate of different screens , Automatically adjust the timing of executing the callback function .
2. When the window is inactive ,requestAnimationFrame Will stop executing , and setTimeout Can't
3. 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