如何覆盖 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() 以便我可以动态调整时间，即不仅在函数启动时，而且在滴答声期间？

Answer 1

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

这会在开发工具的底部打开一个额外的窗格，您可以在其中debug animations。您可以在录制的交互（如视频查看时间线）上来回移动，也可以将动画减慢至原始速度的 10%：

您可以在this page 上阅读有关整个窗格的更多信息。