window.requestAnimationFrame（）函数作用

window.requestAnimationFrame（）

window.requesrAnimateionFrame(callback)
告诉浏览器–你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画，该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。
callback（DOMHightResTimeStamp）
DOMHightResTimeStamp指示当前被requestAnimationFrame()排序的回调函数被触发的时间。咋同一帧中的多个回调函数，他们每一个都会接受到一个相同的时间戳，及时在计算上一个回调函数的工作负载期间已经消耗了一些时间。该时间错是一个十进制数，单位毫秒，最小精度为1ms.

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

兼容性：IE10及以上

与setTimeout相比，rAFt最大的优势是有系统来决定回调函数执行时机，系统每次绘制之前会主动调用rAFt中的回调函数，如果系统绘制率是60Hz，那么回调函数就每16.7ms被执行一次，它能保证回调函数在屏幕每一次的绘制间隔中只被执行一次，不会出现丢帧的现象，也不会导致画面出现卡顿的问题。

简单的来说，类似一个定时器，用来执行动画的回调函数。