Viewing all the timeouts/intervals in javascript?

I'm writing an application that utilizes JavaScript timeouts and intervals to update the page. Is there a way to see how many intervals are setup? I want to make sure that I'm not accidentally going to kill the browser by having hundreds of intervals setup.

Is this even an issue?

Answers:

Answer

I made a Chrome DevTools extension that shows all intervals. Cleared ones are greyed out.

Timers Chrome Devtool extension

setInterval-sniffer

Answer

Seeing as Paul has only covered setTimeout I thought I would share a counter for 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);
};
Answer

Instead of just have a count of timers, here is an implementation which stores all timerid's into an array. It only shows active timers while the accepted answer only counts calls to 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));

This is how you can get the count of active timers on the page:

timers.length;

This is how you can remove all active timers:

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

Known limitations:

  • You can only pass a function (not a string) to setTimeout with this monkey patch.
  • The function assumes clearInterval and clearTimeout do the same, which they do but it could change in the future.
Answer

We've just published a package solving this exact issue.

npm install time-events-manager

With that, you can view and manage them via timeoutCollection object (and javascript's intervals viaintervalCollection object).

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

Answer

I just needed something like this and this is what I've put together:

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);

This records the interval ids along with their functions, and also keeps track of their status (active/inactive).

Answer

I don't think there is a way to enumerate active timers, but you could override window.setTimeout and window.clearTimeout and replace them with your own implementations which do some tracking and then call the originals.

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);
};

Of course, you might not always call clearTimeout, but this would at least give you some way to track what is happening at runtime.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.