Affichage de tous les délais / intervalles en javascript?

J'écris une application qui utilise des délais et des intervalles JavaScript pour mettre à jour la page. Existe-t-il un moyen de voir combien d'intervalles sont configurés? Je veux m'assurer que je ne vais pas accidentellement tuer le navigateur en configurant des centaines d'intervalles.

Est-ce même un problème?

Je ne pense pas qu'il y ait un moyen d'énumérer temporisateurs actifs, mais vous pouvez remplacer window.setTimeoutet window.clearTimeoutles remplacer par vos propres implémentations qui font un certain suivi et appellent les originaux.

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

Bien sûr, vous ne pouvez pas toujours appeler clearTimeout, mais cela vous donnerait au moins un moyen de suivre ce qui se passe au moment de l'exécution.

J'ai créé une extension Chrome DevTools qui montre tous les intervalles. Ceux qui sont effacés sont grisés.

setInterval-sniffer

Étant donné que Paul n'a couvert que setTimeout, j'ai pensé partager un compteur pour 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);
};

Au lieu de simplement avoir un nombre de minuteries, voici une implémentation qui stocke tous les identificateurs de minuterie dans un tableau. Il n'affiche que les minuteries actives tandis que la réponse acceptée ne compte que les appels vers 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));

Voici comment obtenir le nombre de minuteries actives sur la page:

timers.length;

Voici comment supprimer tous les minuteurs actifs :

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

Limitations connues:

• Vous ne pouvez passer une fonction (pas une chaîne) à setTimeoutavec ce patch de singe.
• La fonction suppose clearIntervalet clearTimeoutfait la même chose, ce qu'elle fait, mais cela pourrait changer à l'avenir.

Nous venons de publier un package résolvant exactement ce problème.

npm install time-events-manager

Avec cela, vous pouvez les afficher et les gérer via un timeoutCollectionobjet (et les intervalles de javascript via un intervalCollectionobjet).

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

J'avais juste besoin de quelque chose comme ça et c'est ce que j'ai mis en place:

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

Cela enregistre les intervalles idavec leurs fonctions, et garde également une trace de leur état ( active/ inactive).