javascript - 如何显示由 setTimeout/setInterval 生成的每个正在运行的线程的列表

Question

我想通过纯 javascript 或浏览器中的任何类型的控制台或其他任何方式来执行此操作。

这可能吗？

谢谢

进一步说明:我想调试一个做动画的库。我想知道如果有多个动画对象，是否会创建多个计时器。

Answer 1

请注意，setTimeout() 不会生成新线程。浏览器端脚本不仅是单线程的，而且 JavaScript 评估与页面呈现共享同一个单线程(Web Workers 分开)。

进一步阅读:

• How JavaScript Timers Work通过约翰·雷西格

您可能想自己构建一个计时器管理器:

var timerManager = (function () {
   var timers = [];
   return {
      addTimer: function (callback, timeout) {
         var timer, that = this;
         timer = setTimeout(function () {
            that.removeTimer(timer);
            callback();
         }, timeout);
         timers.push(timer);
         return timer;
      },
      removeTimer: function (timer) {
         clearTimeout(timer);
         timers.splice(timers.indexOf(timer), 1);
      },
      getTimers: function () {
         return timers;
      }
   };
})();

然后按如下方式使用:

var t1 = timerManager.addTimer(function () {
   console.log('Timer t1 triggered after 1 second');
}, 1000);

var t2 = timerManager.addTimer(function () {
   console.log('Timer t2 triggered after 5 second');
   console.log('Number of Timers at End: ' + timerManager.getTimers().length);
}, 5000);

console.log('Number of Timers at Start: ' + timerManager.getTimers().length);

以上将在控制台中显示如下结果:

// Number of Timers at Start: 2
// Timer t1 triggered after 1 second
// Timer t2 triggered after 5 second
// Number of Timers at End: 0

请注意，上面的 timerManager 实现使用了 Array.indexOf() 方法。这是在 JavaScript 1.6 中添加的，因此并非所有浏览器都实现。但是，您可以通过添加来自 this Mozilla Dev Center article 的实现轻松地自己添加方法。 .