如何覆盖setTimeout（）和setInterval（），以允许动态调整。

Question

我正在调试一些复杂的动画内容，有时需要减慢时间以查看发生了什么。由于代码非常复杂，修改动画代码并不可行，因此我决定按照以下方式修改 Date 类：

let ___date = Date.now();
const ___now = Date.now;
Date = new Proxy(Date, {
  construct(target, args) {
    if (args[0] === undefined) args[0] = this.adjust()
    let date = new target(...args);
    return date;
  },
  get(target, prop, receiver) {
    if (prop === 'now') {
      let date = new Date()
      date.now = () => this.adjust()
      return Reflect.get(date, prop, receiver)
    }
    return Reflect.get(target, prop, receiver)
  },    
  apply(target, thisArg, argumentList) {
    return toString.bind(new Date()).call();
  },
  adjust() {
    // ...
  }
});

对于new Data()和Date.now()的使用结果是期望的。通过这个简单的修改，我能够继续进行，但后来发现代码并没有按照预期运行，因为代码的某些部分仍然以忽略我的调整的速度运行。我很快意识到setTimeout()和setInterval()函数是导致问题的原因。

我该如何覆盖setTimeout()和setInterval()，以便可以动态地调整时间，即不仅在函数启动时，而且在运行过程中也可以进行调整？

- Ωmega

---

“所以我可以动态调整时间”是什么意思？只是通过一个恒定因子减慢速度，还是有更阴险的意图？ - Bergi

@Bergi - 动态地 - 有许多选项，例如可以制作一个Chrome扩展程序，在其中可以更改因子/比率（默认为1.00）。 - Ωmega

那么你可能想编写自己的计时器队列，以便按照自己的喜好进行操作，并逐步运行它。 - Bergi

Answer 1

有一种更好的方法来调试动画，至少在Google Chrome中是这样。打开开发者工具，然后从右上角的三个点的菜单中选择更多工具→动画：

这会在 devtools 底部打开一个附加窗格，使您能够调试动画。您可以像观看视频时间轴一样来回移动记录的交互，并将动画减速到其原始速度的 10%：

您可以在此页面上了解有关整个窗格的更多信息。

- Etheryte

---

谢谢，我知道这个功能/选项，但不幸的是，它不适合我的需求。 - Ωmega