requestAnimationFrame还是setTimeval？

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行

注意：若你想在浏览器下次重绘之前继续更新下一帧动画，那么回调函数自身必须再次调用window.requestAnimationFrame()

问题：为啥有setTime 和 setInterval还要用requestAnimationFrame()

答：setTimeout和setInterval的问题是，它们都不精确。它们的内在运行机制决定了时间间隔，参数实际上只是指定了把动画代码添加到浏览器UI线程队列中以等待执行的时间。如果队列前面已经加入了其他任务，那动画代码就要等前面的任务完成后再执行。当一个文件代码里超10w行的时候有明显的动画变慢等问题。

而requestAnimationFrame()就不会有这个问题：以我的理解，相当于我们打游戏的FPS，刷新时机取决于浏览器。浏览器也是一帧一帧的绘制，如果屏幕刷新是75HZ的，它只需要每秒钟给你画75张图片就行了。其他时候保持原来的样子。而在绘制之前调用这个，就基本不会存在误差，因为他是刷新下一帧之前执行。

使用例子：

 // 使用定时器的方式,由于存在eventLoop导致代码优先级的问题.会出现定时并不准确的情况.
  
normalWay()
  function normalWay() {
    let id = setInterval(() => {
    box.style.width = `${++box.clientWidth}px`
    if (box.clientWidth > 300) clearInterval(id)
    console.log(box.style.width)
  }, 17); // 1000ms / 17 = 每分钟 60 fps
}

// requestAnimation方式
rWay()
function rWay() {
  rbox.style.width = `${++rbox.clientWidth}px` // 场景内,有物体的变化,必须刷新浏览器
  if (rbox.clientWidth <= 300)
    requestAnimationFrame(rWay) // 因为必须要刷新浏览器,所以会调用 requestAnimationFrame . 
  // requestAimationFrame 的参数是一个函数.
  // 但是只调用一次,它只会在下一帧渲染之前调用.后续帧刷新时,就不会调用.
  // 所以需要不停的调用这个函数才可以
}