# 定时器函数

  • 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

常见的定时器函数有 setTimeoutsetIntervalrequestAnimationFrame,但 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);