如何覆盖 setTimeout() 和 setInterval() 以允许动态调整

如何解决如何覆盖 setTimeout() 和 setInterval() 以允许动态调整

我正在调试一些复杂的动画内容，有时我需要放慢时间来查看到底发生了什么。由于代码非常复杂，修改动画代码不是一个可行的选择。因此，我决定修改 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,receiver)
    }
    return Reflect.get(target,receiver)
  },apply(target,thisArg,argumentList) {
    return toString.bind(new Date()).call();
  },adjust() {
    // ...
  }
});

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

如何覆盖 setTimeout() 和 setInterval() 以便我可以动态调整时间，即不仅在函数启动时，而且在滴答时？

解决方法

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

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

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