Просмотр всех тайм-аутов/интервалов в JavaScript?
-
21-08-2019 - |
Вопрос
Я пишу приложение, которое использует тайм-ауты и интервалы JavaScript для обновления страницы.Есть ли способ узнать, сколько интервалов установлено?Я хочу быть уверен, что не собираюсь случайно убить браузер, настроив сотни интервалов.
Это вообще проблема?
Решение
Я не думаю, что есть способ перечислить активные таймеры, но вы можете переопределить window.setTimeout и window.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, но это, по крайней мере, даст вам возможность отслеживать, что происходит во время выполнения.
Другие советы
Я создал расширение Chrome DevTools, которое показывает все интервалы.Очищенные значения отображаются серым цветом.
Поскольку Пол рассмотрел только 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);
};
Вместо того, чтобы просто подсчитывать таймеры, вот реализация, которая сохраняет все таймеры в массиве.Это только показывает активные таймеры в то время как принятый ответ учитывает только звонки на 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
с этой нашивкой в виде обезьянки. - Функция предполагает
clearInterval
иclearTimeout
сделайте то же самое, что и они, но в будущем это может измениться.
Мы только что опубликовано пакет, решающий именно эту проблему.
npm install time-events-manager
При этом вы можете просматривать и управлять ими через timeoutCollection
объект (и интервалы JavaScript черезintervalCollection
объект).
timeoutCollection.getScheduled();
timeoutCollection.getCompleted();
timeoutCollection.getAll();
Мне просто нужно было что-то вроде этого, и вот что я собрал:
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);
При этом записываются идентификаторы интервалов вместе с их функциями, а также отслеживается их статус (активный/неактивный).