requestAnimationFrame如何替代setTimeout

Question

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

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

Answer 1

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

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()

Answer 2

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

    setStyle();
  })
}
// 执行方法
setStyle();

Answer 3

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

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

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