window.requestAnimationFrame()工作原理及示例代码解析（JS新手）

作为JavaScript新手，刚接触window.requestAnimationFrame()确实会有点摸不着头脑，我来给你好好唠唠它的工作原理，再拆解你给的这段示例代码~

一、window.requestAnimationFrame()的工作原理 #

简单来说，这是浏览器专门为前端动画打造的API，和咱们常用的setTimeout/setInterval比，优势特别明显：

• 它会和屏幕的刷新频率同步（通常是60次/秒），不会像定时器那样可能出现丢帧、动画卡顿的情况；
• 当浏览器标签页处于后台时，它会自动暂停动画，帮你节省CPU和GPU资源；
• 它的回调函数会接收一个参数：高精度的时间戳，这个时间戳是浏览器自动生成的，用来表示当前回调执行的时间。

二、示例代码逐行解析 #

先把代码贴出来方便对照：

var start = null; 
var element = document.getElementById('SomeElementYouWantToAnimate'); 
element.style.position = 'absolute'; 
function step(timestamp) { 
  if (!start) start = timestamp; 
  var progress = timestamp - start; 
  element.style.left = Math.min(progress / 10, 200) + 'px'; 
  if (progress < 2000) { 
    window.requestAnimationFrame(step); 
  } 
} 
window.requestAnimationFrame(step);

咱们一行一行来看：

1. var start = null;：定义一个变量用来记录动画开始的时间戳，初始值设为null，第一次执行回调时会被赋值。
2. var element = document.getElementById('SomeElementYouWantToAnimate');：获取页面上需要做动画的DOM元素，这里得确保页面上有id为SomeElementYouWantToAnimate的元素哦。
3. element.style.position = 'absolute';：把元素的定位设为绝对定位，因为只有绝对定位/固定定位的元素，修改left、top这类属性才会生效，不然元素只会在文档流里原地不动。
4. function step(timestamp) {...}：这是动画的核心回调函数，timestamp是浏览器自动传入的当前时间戳（单位是毫秒）。
   • if (!start) start = timestamp;：第一次调用step时，start还是null，所以把当前的时间戳赋值给start，这样就拿到了动画的起始时间。
   • var progress = timestamp - start;：计算从动画开始到现在过去了多少毫秒，这个值就是动画的进度。
   • element.style.left = Math.min(progress / 10, 200) + 'px';：这里是动画的核心逻辑：
     • progress / 10：把毫秒数转换成像素值，意思是每过去10毫秒，元素就向右移动1px；
     • Math.min(progress / 10, 200)：限制元素的最大left值为200px，避免元素一直向右跑出去；
     • 最后拼上px单位，设置给元素的left样式。
   • if (progress < 2000) { window.requestAnimationFrame(step); }：判断如果动画还没执行满2000毫秒（也就是2秒），就继续调用requestAnimationFrame，让step函数在下一次屏幕刷新时执行，这样就形成了循环，直到动画满2秒才停止。
5. window.requestAnimationFrame(step);：这行代码是启动动画的开关，第一次调用requestAnimationFrame，告诉浏览器“在下一次屏幕刷新时执行step函数”，动画就开始啦~

内容的提问来源于stack exchange，提问作者Uebo