手写系列 # 2：利用 requestAnimationFrame 实现 setInterval 计时器

const kaimo = {
  timer: null,
  setInterval: function (callback, interval) {
    // 起始时间
    let startTime = new Date().valueOf();
    // 结束时间
    let endTime = new Date().valueOf();
    const self = this;
    // 循环函数
    const loop = function() {
      // 该方法调用必须在 callback 之前，确保打印的 'self.timer'  'clearInterval' 的值一样
      self.timer = requestAnimationFrame(loop);
      endTime = new Date().valueOf();
      // 判断时间超过 interval 就执行函数，并重置时间
      if(endTime - startTime >= interval) {
        // 让起始时间、结束时间相同
        endTime = startTime = new Date().valueOf();
        // 执行回调
        console.log('self.timer', self.timer);
        callback && callback();
      }
    }
    // 执行 requestAnimationFrame
    this.timer = requestAnimationFrame(loop);
    console.log('timer', this.timer);
    // 返回 timer
    return this.timer;
  },
  clearInterval: function () {
    console.log('clearInterval', this.timer);
    cancelAnimationFrame(this.timer);
  }
};

// 测试 3秒后清掉
let count = 0;
kaimo.setInterval(() => {
  console.log(666);
  count++;
  if(count >= 3) {
    kaimo.clearInterval();
  }
}, 1000);