requestAnimationFrame如何替代setTimeout

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

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

阅读 4.5k
3 个回答

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题