99

我正在编写一个利用 JavaScript 超时和间隔来更新页面的应用程序。有没有办法查看设置了多少间隔?我想确保我不会通过设置数百个间隔来意外杀死浏览器。

这甚至是一个问题吗?

4

7 回答 7

87

我认为没有办法枚举活动计时器,但您可以覆盖window.setTimeoutwindow.clearTimeout用您自己的实现替换它们,这些实现会进行一些跟踪,然后调用原始计时器。

window.originalSetTimeout = window.setTimeout;
window.originalClearTimeout = window.clearTimeout;
window.activeTimers = 0;

window.setTimeout = function(func, delay) {
    window.activeTimers++;
    return window.originalSetTimeout(func, delay);
};

window.clearTimeout = function(timerID) {
    window.activeTimers--;
    window.originalClearTimeout(timerID);
};

当然,您可能并不总是调用clearTimeout,但这至少可以为您提供一些方法来跟踪运行时发生的事情。

于 2009-05-13T15:27:47.527 回答
30

我做了一个显示所有间隔的 Chrome DevTools 扩展。清除的会变灰。

计时器 Chrome Devtool 扩展

setInterval-嗅探器

于 2013-05-23T15:38:16.087 回答
12

这里不仅仅是一个计时器计数,而是一个将所有计时器存储到一个数组中的实现。它只显示活动计时器setTimeout,而接受的答案只计算对&的调用clearTimeout

(function(w) {
    var oldST = w.setTimeout;
    var oldSI = w.setInterval;
    var oldCI = w.clearInterval;
    var timers = [];
    w.timers = timers;
    w.setTimeout = function(fn, delay) {
        var id = oldST(function() {
            fn && fn();
            removeTimer(id);
        }, delay);
        timers.push(id);
        return id;
    };
    w.setInterval = function(fn, delay) {
        var id = oldSI(fn, delay);
        timers.push(id);
        return id;
    };
    w.clearInterval = function(id) {
        oldCI(id);
        removeTimer(id);
    };
    w.clearTimeout = w.clearInterval;

    function removeTimer(id) {
        var index = timers.indexOf(id);
        if (index >= 0)
            timers.splice(index, 1);
    }
}(window));

这是获取页面上活动计时器计数的方法

timers.length;

这是删除所有活动计时器的方法:

for(var i = timers.length; i--;)
    clearInterval(timers[i]);

已知限制:

  • 你只能通过setTimeout这个猴子补丁传递一个函数(而不是一个字符串)。
  • 该功能假设clearIntervalclearTimeout执行相同的操作,他们会这样做,但将来可能会发生变化。
于 2016-03-11T10:01:59.097 回答
11

看到 Paul 只介绍了 setTimeout,我想我会为 setInterval/clearInterval 共享一个计数器。

window.originalSetInterval = window.setInterval;
window.originalClearInterval = window.clearInterval;
window.activeIntervals = 0;
window.setInterval = function (func, delay)
{
    if(func && delay){
            window.activeIntervals++;
    }
    return window.originalSetInterval(func,delay);
};
window.clearInterval = function (intervalId)
{
    // JQuery sometimes hands in true which doesn't count
    if(intervalId !== true){
        window.activeIntervals--;
    }
    return window.originalClearInterval(intervalId);
};
于 2011-09-20T15:38:29.463 回答
5

我们刚刚发布了一个包来解决这个确切的问题。

npm install time-events-manager

timeoutCollection有了它,您可以通过对象(以及通过对象的 javascript 间隔)查看和管理它们intervalCollection

timeoutCollection.getScheduled(); timeoutCollection.getCompleted(); timeoutCollection.getAll();

于 2017-05-11T15:25:37.250 回答
1

我只需要这样的东西,这就是我放在一起的:

window.setInterval = function (window, setInterval) {
  if (!window.timers) {
    window.timers = {};
  }
  if (!window.timers.intervals) {
    window.timers.intervals = {};
  }
  if (!window.timers.intervals.active) {
    window.timers.intervals.active = {};
  }
  return function (func, interval) {
    var id = setInterval(func, interval);
    window.timers.intervals.active[id] = func;
    return id;
  }
}(window, window.setInterval);

window.clearInterval = function (window, clearInterval) {
  if (!window.timers) {
    window.timers = {};
  }
  if (!window.timers.intervals) {
    window.timers.intervals = {};
  }
  if (!window.timers.intervals.inactive) {
    window.timers.intervals.inactive = {};
  }
  return function (id) {
    if (window.timers.intervals.active && window.timers.intervals.active[id]) {
      window.timers.intervals.inactive[id] = window.timers.intervals.active[id];
      clearInterval(id);
      delete window.timers.intervals.active[id];
    }
  }
}(window, window.clearInterval);

这记录了区间ids 及其函数,并跟踪它们的状态 ( active/ inactive)。

于 2018-02-19T11:47:53.783 回答
0

基于@Alessio 的回答。下面是我的版本。具有更多的日志记录和检查功能。

以下是一些样板文件,您可以更改它们以使用自己的框架:

var s$ = function (s){return new String(s)}
var _w=window
_w.q$ = {
  getMachineTimeMS: function(){
      var d = new Date(), ms = d.getMilliseconds()
      var a = [d.getHours(), d.getMinutes(), d.getSeconds(), '-', ms<10?'00' + s$(ms):ms<100?'0'+s$(ms):ms]
      return a.join('')
  }
  ,getCaller: function(opts){
      return "(implement this)"
  }
}

这是主要代码:

_w.setTimeout = function (orig_setTimeout) {
  var t=(_w._Timers = _w._Timers||{})
  var d=(t.Timeouts = t.Timeouts||{})
  d.Active = d.Active||{}
  t.z_to_id_idx = t.z_to_id_idx||{}
  return function (h, n) {
    var t = _w._Timers, d = t.Timeouts
    var id = orig_setTimeout(h, n), ts = q$.getMachineTimeMS()
    var c = q$.getCaller({depth:2})
    t.z_to_id_idx[s$(id)] = d.Active[ts] = {sts: ts, id: id, h: h, n: n, scaller: c}
    return id;
  }
}(_w.setTimeout);

_w.clearTimeout = function (orig_clearTimeout) {
  var t=_w._Timers, d = t.Timeouts
  d.Inactive = d.Inactive||{}
  return function new_clearTimeout(id) {
    var t = _w._Timers, d = t.Timeouts, sId = s$(id)
    if (!d.Active || !sId in t.z_to_id_idx) return
    var r = t.z_to_id_idx[sId]
    r.ccaller = q$.getCaller({depth:2})
    r.cts = q$.getMachineTimeMS()
    d.Inactive[r.ts] = r;
    orig_clearTimeout(r.id);
    delete d.Active[r.ts]
    delete t.z_to_id_idx[sId]
  }
}(_w.clearTimeout);

_w.setInterval = function (orig_setInterval) {
  var t=(_w._Timers = _w._Timers||{})
  var d=(t.Intervals = t.Intervals||{})
  d.Active = d.Active||{}
  t.z_in_id_idx = t.z_in_id_idx||{}
  return function (h, n) {
    var t = _w._Timers, d = t.Intervals
    var id = orig_setInterval(h, n), ts = q$.getMachineTimeMS()
    var c = q$.getCaller({depth:2})
    t.z_in_id_idx[s$(id)] = d.Active[ts] = {sts: ts, id: id, h: h, n: n, scaller: c}
    return id;
  }
}(_w.setInterval);

_w.clearInterval = function (orig_clearInterval) {
  var t=_w._Timers, d = t.Intervals
  d.Inactive = d.Inactive||{}
  return function new_clearInterval(id) {
    var t = _w._Timers, d = t.Intervals, sId = s$(id)
    if (!d.Active || !sId in t.z_in_id_idx) return
    var r = t.z_in_id_idx[sId]
    r.ccaller = q$.getCaller({depth:2})
    r.cts = q$.getMachineTimeMS()
    d.Inactive[r.ts] = r;
    orig_clearInterval(r.id);
    delete d.Active[r.ts]
    delete t.z_in_id_idx[sId]
  }
}(_w.clearInterval);

使用示例:

id = setTimeout(()=>{console.log("CALLED")}, 10000)
clearTimeout(id)
setInterval(()=>{console.log("CALLED")}, 1000)

console.table(_w._Timers.Timeouts.Inactive)

console.table 将在 JavaScript 控制台中输出格式良好且可检查的表格

于 2021-07-10T00:50:45.903 回答