BFE.devAI解答 - JavaScript 代码题
84. 创建一个fake timer (setInterval)

这道题目与 #36 非常相似，我们只需重新实现一个静态化的setInterval，实现的方法也非常类似，下面是具体实现：

class FakeTimer {  install() {    // 重写 setInterval 函数    this.oldSetInterval = window.setInterval;    window.setInterval = (func, delay) => {      const startTime = Date.now();      let intervalId;      const intervalFunc = () => {        const timePassed = Date.now() - startTime;        intervalId = this.oldSetInterval(intervalFunc, delay - timePassed);        func();      };      intervalId = this.oldSetInterval(intervalFunc, delay);      return intervalId;    };    // 重写 clearInterval 函数    this.oldClearInterval = window.clearInterval;    window.clearInterval = (intervalId) => {      this.oldClearInterval(intervalId);    };    // 重写 Date.now 函数    this.oldNow = Date.now;    let now = 0;    Date.now = () => now;  }  uninstall() {    window.setInterval = this.oldSetInterval;    window.clearInterval = this.oldClearInterval;    Date.now = this.oldNow;  }  tick() {    let intervalIds = [];    while (intervalIds.length) {      const id = intervalIds.shift();      this.oldClearInterval(id);    }    let now = 0;    dateNowFunc = Date.now;    Date.now = () => now;    setTimeoutFunc = window.setTimeout;    window.setTimeout = (func, delay) => {      const start = now;      intervalIds.push(        this.oldSetInterval(() => {          const timePassed = now - start;          if (timePassed >= delay) {            this.oldClearInterval(intervalIds.shift());            func();          }        }, 0)      );      return intervalIds[intervalIds.length - 1];    };    // 时间不断增加    function increaseTime(amount) {      now = now + amount;      tick();    }    function tick() {      for (let i = 0; i < intervalIds.length; i++) {        const id = intervalIds[i];        if (this.timeouts[id]) {          if (this.timeouts[id].timeoutTime <= now) {            const timeout = this.timeouts[id];            timeout.func.call(timeout.context);            // interval repitition            if (timeout.interval) {              timeout.timeoutTime = now + timeout.delay;            } else {              delete this.timeouts[id];            }          }        } else {          this.oldClearTimeout(id);        }      }    }    setInterval(() => {      now += 1000;      tick();    });    return increaseTime;  }}

来看具体的实现方法：

首先重写setInterval函数，使用一个 intervalFunc 作为间隔运行的函数，该函数会在delay时间后调用 func，同时，在每次运行时计算所用的时间，将延迟时间减已用时间就是下次函数运行的时间，从而实现间隔精度。

 window.setInterval = (func, delay) => {      const startTime = Date.now();      let intervalId;      const intervalFunc = () => {        const timePassed = Date.now() - startTime;        intervalId = this.oldSetInterval(intervalFunc, delay - timePassed);        func();      };      intervalId = this.oldSetInterval(intervalFunc, delay);      return intervalId; };

接下来重写clearInterval函数

window.clearInterval = (intervalId) => {      this.oldClearInterval(intervalId);};

最后是我们需要实现的时间轴函数，主要分为三个部分：

1. tick(): 用于对于目前所有的定时器进行检查，是否已经超过设定的时间，从而决定是否执行 callback 函数；
2. increaseTime(amount): 增加秒数的函数，用于测试时控制时间前进的速度
3. setInterval(() => { ... }): 用于让时间时间不断增加

let now = 0;dateNowFunc = Date.now;Date.now = () => now;setTimeoutFunc = window.setTimeout;window.setTimeout = (func, delay) => {  const start = now;  intervalIds.push(    this.oldSetInterval(() => {      const timePassed = now - start;      if (timePassed >= delay) {        this.oldClearInterval(intervalIds.shift());        func();      }    }, 0)  );  return intervalIds[intervalIds.length - 1];};function increaseTime(amount) {  now = now + amount;  tick();}function tick() {  for (let i = 0; i < intervalIds.length; i++) {    const id = intervalIds[i];    if (this.timeouts[id]) {      if (this.timeouts[id].timeoutTime <= now) {        const timeout = this.timeouts[id];        timeout.func.call(timeout.context);        // interval repitition        if (timeout.interval) {          timeout.timeoutTime = now + timeout.delay;        } else {          delete this.timeouts[id];        }      }    } else {      this.oldClearTimeout(id);    }  }}setInterval(() => {  now += 1000;  tick();});return increaseTime;

最后就可以将三个函数组合起来，从而实现静态化的setInterval和clearInterval

完整代码如下：