requestAnimationFrame如何替代setTimeout

• Z时代
• 2024-02-16
• 分类：IT

setTimeout(()=>{
    // 设置样式
}, 200)

如果用requestAnimationFrame来替换setTimeout，应该怎么写?

回答：

如果你要计时的话，就加个计数器。

function createOnFrame(duration, callback) {
  let count = 0;
  const _onFrame = function () {
    if (count < duration) {
      count += 16.66667;
      requestAnimationFrame(_onFrame);
      return;
    }
    callback();
  }
  return _onFrame;
}
const onFrame = createOnFrame(200, () => {
  // do something
  ....
});
const requestId = requestAnimationFrame(onFrame);

参考：MDN Window.requestAnimationFrame()

回答：

// 定义一个变量存储定时器，可以通过cancelAnimationFrame(timer)来取消循环
let timer = null;
// 这是 循环设置样式 的方法
const setStyle = () => {
  timer = requestAnimationFrame(() => {
    // 设置样式
    // ...
    setStyle();
  })
}
// 执行方法
setStyle();

回答：

requestAnimationFrame只有一个参数，也就是回调函数。
所以，把 setTimeout的第二个参数去掉，就是 RAF 的语法：

requestAnimationFrame(() =>{
// 回调函数的代码块
});

如果有计时的需求的话，还是建议使用 setTimeout。

以上是 requestAnimationFrame如何替代setTimeout 的全部内容， 来源链接： utcz.com/p/936893.html