定时器函数

# 定时器函数

setTimeout 表示间隔一段时间之后执行一次调用
setInterval 则是每间隔一段时间循环调用
setImmediate 立即执行函数
requestAnimationFrame 在浏览器重绘之前执行回调函数（类似 setTimeout 延迟执行）

clearTimeout, clearInterval 函数用来结束尚未执行的 setTimeout 和 setInterval。

内存方面，setTimeout 只需要进入一次队列，不会造成内存溢出；setInterval 因为不计算代码执行时间，有可能同时执行多次代码，导致内存溢出。

# setTimeout、setInterval、requestAnimationFrame 各有什么特点？

很多人认为 setTimeout 是延时多久，那就应该是多久后执行。其实这个观点是错误的，因为 JS 是单线程执行的，如果前面的代码影响了性能，就会导致 setTimeout 不会按期执行。

setInterval，其实这个函数作用和 setTimeout 基本一致，只是该函数是每隔一段时间执行一次回调函数。通常来说不建议使用 setInterval。第一，它和 setTimeout 一样，不能保证在预期的时间执行任务。第二，它存在执行累积的问题。如果定时器执行过程中出现了耗时操作，多个回调函数会在耗时操作结束以后同时执行，这样可能就会带来性能上的问题。

如果有循环定时器的需求，其实完全可以通过 requestAnimationFrame 来实现

function setInterval(callback, interval) {
  let timer;
  const now = Date.now;
  let startTime = now();
  let endTime = startTime;
  const loop = () => {
    timer = window.requestAnimationFrame(loop);
    endTime = now();
    if (endTime - startTime >= interval) {
      startTime = endTime = now();
      callback(timer);
    }
  };
  timer = window.requestAnimationFrame(loop);
  return timer;
}

let a = 0;
setInterval(timer => {
  console.log(1);
  a++;
  if (a === 3) cancelAnimationFrame(timer);
}, 1000);

首先 requestAnimationFrame 自带函数节流功能，基本可以保证在 16.6 毫秒内只执行一次（不掉帧的情况下），并且该函数的延时效果是精确的，没有其他定时器时间不准的问题，当然你也可以通过该函数来实现 setTimeout。

常见的定时器函数有 setTimeout、setInterval、requestAnimationFrame，但 setTimeout、setInterval 并不是到了哪个时间就执行，而是到了那个时间把任务加入到异步事件队列中。

因为 JS 是单线程执行的，如果某些同步代码影响了性能，就会导致 setTimeout 不会按期执行。

而 setInterval 可能经过了很多同步代码的阻塞，导致不正确了，可以使用 setTimeout 每次获取 Date 值，计算距离下一次期望执行的时间还有多久来动态的调整。

requestAnimationFrame (opens new window) 自带函数节流功能，基本可以保证在 16.6 毫秒内只执行一次（不掉帧的情况下），并且该函数的延时效果是精确的，没有其他定时器时间不准的问题

# requestAnimationFrame 原理？是同步还是异步

异步，传入的函数在重绘之前调用

# 133.用 setTimeout 实现 setInterval，阐述实现的效果与 setInterval 的差异

function mySetInterval() {
  mySetInterval.timer = setTimeout(() => {
    arguments[0]();
    mySetInterval(...arguments);
  }, arguments[1]);
}

mySetInterval.clear = function() {
  clearTimeout(mySetInterval.timer);
};

mySetInterval(() => {
  console.log(11111);
}, 1000);

setTimeout(() => {
  // 5s 后清理
  mySetInterval.clear();
}, 5000);