Kill all setInterval in Angular

Question

How can I find and stop all of setInterval (s) in Angular? Some setInterval do not created by my program and run in another components or even a jQuery in my web application and I want to stop it! CORS is not concerned.

not sure what you mean. "kill" is not a programming term so I don't think anyone is going to be able to help you without knowing more info. — Rick, Jul 26 '21 at 03:47
kill is most certainly a programming term, and plenty of people will know what's being asked. It's fairly clear that they're talking about what in JS parlance is called "clearing" all intervals. — Mike 'Pomax' Kamermans, Jul 26 '21 at 04:02
Does this answer your question? [How do I clear all intervals?](https://stackoverflow.com/questions/8635502/how-do-i-clear-all-intervals) — Max Peng, Jul 26 '21 at 05:48

Mike 'Pomax' Kamermans · Answer 1 · 2021-07-26T04:27:29.660

If you absolutely need "a" solution, even a bad one, then you can overwrite the setInterval and setTimeout functions, and maintain your own list of assigned interval identifiers. However, a much better solution would be to write your code to deal with the fact that other parts of the libraries and frameworks you use can schedule timeouts and ntervals, instead of forcefully killing them with complete disregard of what was relying on them to run in the first place.

Indiscriminantly killing all timers will break things.

So, with that covered, the terrible solution would be code like this:

(function monitorIntervalsAndTimeouts() {
  const timerList = [];

  const oldSetInterval = globalThis.setInterval.bind(globalThis);
  globalThis.setInterval = function(...args) {
    const timerId = oldSetInterval(...args);
    timerList.push(timerId);
    return timerId;
  };

  const oldSetTimeout = globalThis.setTimeout.bind(globalThis);
  globalThis.setTimeout = function(...args) {
    const timerId = oldSetTimeout (...args);
    timerList.push(timerId);
    return timerId;
  };

  ...

And of course, the corresponding clear functions:

  ...

  const oldClearInterval = globalThis.clearInterval.bind(globalThis);
  globalThis.clearInterval = function(timerId) {
    const pos = timerList.indexOf(timerId);
    if (pos > -1) timerList.splice(pos, 1);
    return oldClearInterval(timerId);
  };

  const oldClearTimeout = globalThis.clearTimeout.bind(globalThis);
  globalThis.clearTimeout = function(timerId) {
    const pos = timerList.indexOf(timerId);
    if (pos > -1) timerList.splice(pos, 1);
    return oldClearTimeout(timerId);
  };

  ...

and finally, a "clear all timers" function:

  ...

  // Call this whatever you want.
  globalThis.clearAllIntervalsAndTimeouts = function() {
    while(timerList.length) {
      // clearInterval and clearTimeout are, per the HTML standard,
      // the exact same function, just with two names to keep code clean.
      oldClearInterval(timerList.shift());
    }
  };
})();

You then make sure you load this using <script src="./monitor-intervals-and-timeouts.js"></script>, without the async and/or defer keyword, as very first script in your page's <head> element, so that it loads before anything else. And yes: that will block the page parsing while it does that. Or if you're using Node (which this will work fine for, too, because of the use of globalThis), you need to make sure it's the absolute first thing your main entry point imports/requires (depending on whether you're using ESM or CJS code).

Remember: this is the nuclear option. If you use this code, you're using it because you need to run something for local dev work that lets you debug your project, for finding out where timeouts/intervals are getting set and cleared. If you need it for that: go for it. But never, ever use this in production to solve a problem relating to timeouts/intervals used by third party/vendor code. Solve that the right way by actually solving whatever problem your own code has.

Kill all setInterval in Angular

1 Answers1