神奇的requestAnimationFrame解决传统定时器bug

先给结论

function customInterval(callback, interval) {
  let lastTime = 0;

  function animate(time) {
    if (time - lastTime >= interval) {
      callback();
      lastTime = time;
    }
    requestAnimationFrame(animate);
  }

  requestAnimationFrame(animate);
}

// 使用示例
customInterval(() => {
  // 这里是你想要执行的代码，每秒执行一次
  console.log("定时器触发了！");
}, 1000);

// 上面的代码 同等于
    
setInterval(() => {
}, 1000)

requestAnimationFrame 简介

可能你还没见过这个东西是个啥，其实他就是类似于setTimeout和setInterval，然而它与setTimeout和setInterval又有所不同，
requestAnimationFrame不需要设置时间间隔。这有什么好处呢？requestAnimationFrame有何神奇之处？本文将详细介绍HTML5新增的定时器requestAnimationFrame。

// JavaScript的动画的核心技术之一是计时器。
计时器一直是javascript动画的核心技术。而编写动画循环的关键是要知道延迟时间多长合适。一方面，循环间隔必须足够短，这样才能让不同的动画效果显得平滑流畅；
另一方面，循环间隔还要足够长，这样才能确保浏览器有能力渲染产生的变化。

// 一般来说，电脑显示器的刷新频率是60Hz。
大多数电脑显示器的刷新频率是60Hz，大概相当于每秒钟重绘60次。大多数浏览器都会对重绘操作加以限制，不超过显示器的重绘频率，因为即使超过那个频率用户体验也不会有提升。
因此，最平滑动画的最佳循环间隔是1000ms/60，约等于16.6ms。

// 但是，setTimeout和setInterval存在一些问题。
而setTimeout和setInterval的问题是，它们都不精确。它们的内在运行机制决定了时间间隔参数实际上只是指定了把动画代码添加到浏览器UI线程队列中以等待执行的时间。如果队列前面已经加入了其他任务，
那动画代码就要等前面的任务完成后再执行。

// 这时，requestAnimationFrame就显示出了其优势。
requestAnimationFrame采用系统时间间隔，保持最佳绘制效率，不会因为间隔时间过短，造成过度绘制，增加开销；也不会因为间隔时间太长，使用动画卡顿不流畅，让各种网页动画效果能够有一个统一的刷新机制，
从而节省系统资源，提高系统性能，改善视觉效果。

requestAnimationFrame 特点

// 下面列举了requestAnimationFrame的一些主要特点
【1】requestAnimationFrame会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率
【2】在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的CPU、GPU和内存使用量
【3】requestAnimationFrame是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销
【4】requestAnimationFrame可以在某些时候解决setTimeout和setInterval的bug，传统定时器在页面tab切换时候，定时器会进入一个假死状态，比如你电脑开了两个窗口，首先你打开有定时器的页面，
然后定时器开始执行，假设每秒i+1，当i=10时候你切换到别的tab窗口，隔了一段时间看，i继续从=10开始累加。。。

requestAnimationFrame 使用方法

requestAnimationFrame的用法与settimeout很相似，只是不需要设置时间间隔而已。requestAnimationFrame使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。它返回一个整数，表示定时器的编号，
这个值可以传递给cancelAnimationFrame用于取消这个函数的执行。

// 示例代码
var timer = requestAnimationFrame(function(){
    console.log(0);
});
console.log(timer);
//结果1和0
上面这段代码其中结果1则是requestAnimationFrame返回值，执行一遍返回1，如此类推，你可能疑惑为什么console.log(timer);中的timer没有加()也能执行，这得回到文章头部说到的你可以理解为requestAnimationFrame就是个定时器，
定时器自然不需要手动去触发执行。

// 使用cancelAnimationFrame取消定时器
cancelAnimationFrame方法用于取消定时器
var timer = requestAnimationFrame(function(){
    console.log(0);
});
cancelAnimationFrame(timer);

// 也可以直接使用返回值进行取消
var timer = requestAnimationFrame(function(){
    console.log(0);
});
cancelAnimationFrame(1);

使用requestAnimationFrame解决传统定时器bug示例

/**
   * 倒计时循环
   * @private
   */
  _CountDownLoop() {
    var currStemp = new Date();
    currStemp = new Date(currStemp.getTime() + this.offset);
    //如果结束时间戳减去当前时间时间戳小于等于0则设置倒计时结束标识为true
    if (this.endStemp.getTime() - currStemp.getTime() <= 0) {
      this.isEnd = true;
    }
    //如果结束则调用结束回调
    if (this.isEnd === true) {
      this.endcallback.apply(this, [this.endurl]);
    } else {
      this._render(currStemp);
      var that = this;
      requestAnimationFrame(function() {
        that._CountDownLoop();
      });
    }
  }

// 上面的示例展示了如何通过requestAnimationFrame实现高频度刷新的倒计时，解决了使用传统setTimeout和setInterval时可能出现的问题。