กำลังดูการหมดเวลา / ช่วงเวลาทั้งหมดในจาวาสคริปต์หรือไม่


89

ฉันกำลังเขียนแอปพลิเคชันที่ใช้การหมดเวลาและช่วงเวลาของ JavaScript ในการอัปเดตเพจ มีวิธีดูว่ามีการตั้งค่ากี่ช่วงเวลาหรือไม่? ฉันต้องการให้แน่ใจว่าฉันจะไม่ฆ่าเบราว์เซอร์โดยไม่ได้ตั้งใจด้วยการตั้งค่าช่วงเวลาหลายร้อยครั้ง

นี่เป็นปัญหาหรือไม่?

คำตอบ:


79

ฉันไม่คิดว่ามีวิธีที่จะระบุตัวจับเวลาการใช้งาน แต่คุณสามารถแทนที่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แต่อย่างน้อยก็จะช่วยให้คุณสามารถติดตามสิ่งที่เกิดขึ้นในรันไทม์ได้


3
ผมใช้วิธีนี้ในรหัสบางอย่างในวันนี้ แต่ผมจำเป็นต้องมีactiveTimersการพร่องเมื่อclearTimeoutถูกไม่ได้เรียกว่า ซึ่งทำได้อย่างง่ายดายโดยการแทนที่บรรทัดที่สองwindow.setTimeoutด้วยสิ่งนี้: return window.originalSetTimeout(function() {func(); activeTimers--;},delay);
Rick Hitchcock

2
คำตอบนี้จะไม่สามารถทำงานได้อีกต่อไปเนื่องจากฟังก์ชัน JavaScript ที่เกี่ยวข้องกับ DOM จะเป็น "ไม่เปลี่ยนรูป"
John Greene

29

ฉันสร้างส่วนขยาย Chrome DevTools ที่แสดงช่วงเวลาทั้งหมด คนที่เคลียร์แล้วจะเป็นสีเทา

ส่วนขยายของ Timers Chrome Devtool

setInterval-sniffer


10
น่าเศร้าที่ดูเหมือนว่าจะหยุดทำงานกับ Chrome
Joseph Lennox

@JosephLennox ทางเลือกนี้ใช้งานได้จริงทดสอบแล้ว: chrome.google.com/webstore/detail/timeouts-and-intervals/…
Trever Thompson

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

9

แทนที่จะมีเพียงตัวนับจำนวนเท่านั้นนี่คือการใช้งานที่เก็บตัวจับเวลาทั้งหมดไว้ในอาร์เรย์ มันแสดงให้เห็นตัวจับเวลาการใช้งานในขณะที่คำตอบที่ได้รับการยอมรับนับเฉพาะการโทรไปยัง&setTimeoutclearTimeout

(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ทำเช่นเดียวกันซึ่งทำได้ แต่อาจเปลี่ยนแปลงได้ในอนาคต

เป็นไปได้SetIntervalsหรือไม่ที่จะได้รับชื่อของการวิ่งทั้งหมด? ตัวอย่างเช่นvar timer = setInterval(function () { }ฉันต้องการตัวจับเวลาแทนการนับช่วงเวลาที่กำลังทำงานอยู่
Yogesh Patel

ไม่ใช่ว่าฉันรู้ฉันขอแนะนำให้ใช้การค้นหาทั่วโลกด้วยคำหลัก "setInterval" และ / หรือ "setTimeout"
Carles Alcolea

4

เราเพิ่งเผยแพร่แพ็คเกจเพื่อแก้ปัญหานี้

npm install time-events-manager

ด้วยวิธีนี้คุณสามารถดูและจัดการได้ผ่านtimeoutCollectionวัตถุ (และช่วงเวลาของจาวาสคริปต์ผ่านintervalCollectionวัตถุ)

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


2
ฉันคิดว่า OP และคนส่วนใหญ่กำลังมองหาบางอย่างเพื่อพิมพ์ในคอนโซลของเบราว์เซอร์เป็น PoC ตัวแรกและอาจเป็นส่วนขยายในภายหลัง เราจะนำข้อมูลนั้นไปใส่ในคอนโซลอย่างไรจากข้อมูลที่คุณให้
Carles Alcolea

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

ซึ่งจะบันทึกช่วงเวลาidพร้อมกับฟังก์ชันและยังติดตามสถานะ ( active/ inactive)

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.