Question

所以我想知道，在JavaScript中是否有任何可行的方法来查看有关您未明确了解的预定超时和间隔的信息（我知道setTimeout和setInterval会返回一个句柄用于引用预定的实例，但是说由于某种原因这是不可用的）？例如，有没有办法使用像Chrome的JavaScript控制台这样的工具来确定任意页面上当前处于活动状态的超时，什么时候它们将会触发，以及在它们触发时将执行哪些代码？更具体地说，一个页面刚刚执行了以下JavaScript：

setTimeout("alert('test');", 30000);

此时我是否可以执行一些代码，告诉我浏览器将在30秒后执行alert('test');？

理论上似乎应该有某种方式来获取此信息，因为如果您知道在哪里查看，JavaScript中的所有内容都会作为公共可访问的属性公开，但我无法回想起自己或看到别人完成了。

Answer 1

如何简单地重写setTimeout函数以排序注入自定义日志记录功能？

像

var oldTimeout = setTimeout;
window.setTimeout = function(callback, timeout) {
  console.log("timeout started");
  return oldTimeout(function() {
    console.log('timeout finished');
    callback();
  }, timeout);
}

可能有用吗？

Answer 2

不，即使HTML5 spec（这是当前浏览器中HTML 4.01行为的合理化，附加功能）也没有指定列出可用回调的方法。

Answer 3

我们刚刚发布了解决这个问题的方案。

npm install time-events-manager

有了这个，您可以通过timeoutCollection＆amp; intervalCollection个对象。

Answer 4

您还可以创建一个计时器管理器模块，该模块将跟踪当前计时器，并允许您获取，添加，停止和停止所有计时器。

var timers = (function() {
  //
  var timers = []

  //
  const getIndex = (array, attr, value) => {
      for (let i = 0; i < array.length; i += 1) {
          if (array[i][attr] === value) {
              return i
          }
      }
      return -1
  };

  // add
  const add = (callback, time) => {
    var id = setTimeout(() => {
      let index = getIndex(timers, 'id', id)
      timers.splice(index, 1)
      callback()
    }, time)
    timers.push({
      id: id,
      time: time,
      debug: callback.toString()
    })
  };

  // get all active timers
  const all = () => timers

  // stop timer by timer id
  const stop = (id) => {
    if (!isNaN(id)) {
      let index = getIndex(timers, 'id', id)
      if (index !== -1) {
        clearTimeout(timers[index].id)
        timers.splice(index, 1)
      }
    }
  };

  // stop all timers
  const stopAll = () => {
    for (let i = 0; i < timers.length; i++) {
      clearTimeout(timers[i].id)
    }
    timers = []
  };

  return {
    add: add,
    all: all,
    stop: stop,
    stopAll: stopAll,
  };
})();

//
timers.add(function() {
  console.log("timeout 1 fired");
}, 1000)

timers.add(function() {
  console.log("timeout 2 wont get fired");
}, 2000)

timers.add(function() {
  console.log("timeout 3 fired");
}, 3000)

timers.add(function() {
  console.log("timeout 4 fired, timers", timers.all());
}, 4000)

timers.add(function() {
  console.log("timeout 5 fired");
}, 5000)

console.log('All timers', timers.all())

console.log("kill timer 2")
timers.stop(2)

运行代码段以查看其实际效果。

JavaScript - 是否可以查看所有当前计划的超时？

4 个答案: