setInterval 和 requestAnimationFrame 分析

最新推荐文章于 2025-05-26 18:41:40 发布

Z_ One Dream

最新推荐文章于 2025-05-26 18:41:40 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： requestAnimationFrame

本文链接：https://blog.youkuaiyun.com/weixin_42335036/article/details/98176571

javascript 专栏收录该内容

13 篇文章

订阅专栏

时间: 2019-8-2

电脑的屏幕每时每刻都以大约 16ms 的速度在刷新，我们的肉眼是没法看出来的。

正因为这样，所以我们才能看到屏幕上的任何一丝一毫的变化。

requestAnimationFrame 到底是什么？

ok，requestAnimationFrame 这个函数是window添加的一个api,当电脑重绘的时候，把你的函数传给这个api,那么它就会在下次重绘时执行你的函数。

setInterval？(setTimeout )

setInterval 也是windows的一个 api, 它是定期将某一段代码放入到 js 执行的队列中。

举个例子吧：

假设有这么一段代码 (大家可以复制到本地看一下)

<!DOCTYPE html>
<html lang="en">
<body>
  <div class="box" style="width: 10px; height: 10px; background: red;"></div>
</body>
<script>
  let box = document.querySelector('.box');
  let num = 0;
  setInterval(() => {
    num++;
    box.style.transform = 'translateX(' + num + 'px)';
  }, 16);
</script>
</html>

如果是这串代码并且你的电脑是（1秒刷新60次） 的话，那么 setInterval 和 requestAnimationFrame 的效率是完全一样的。

因为我们让它16毫秒执行一次，所以这个执行是非常流畅的。

=============================================================================

那么如果电脑是（1秒刷新70次）那么 setInterval 执行就会变成这样。（假设10ms刷新一次）

0ms 屏幕未刷新 setInterval 未执行 => 方块在初始位置

10ms 屏幕刷新 setInterval 未执行 => 方块在初始位置

16ms 屏幕未刷新 setInterval 执行一次 => 方块在初始位置

20ms 屏幕刷新 setInterval 执行一次 => 方块在 1px 的位置

============================================================================