如何防止clearInterval破坏setTimeout

Question

I'm a third party javascript developer and one of my clients has the following code on their page, which gets run repeatedly:

for (var i = 1; i < 99999; i++) {
    window.clearInterval(i);
}

This of course breaks my setInterval loop. I figured I'd work around that by just using a setTimeout which creates another setTimeout if some conditions aren't met yet. Much to my surprise, the clearInterval code above also breaks my timeout.

You can observe this behavior without even creating a setTimeout loop, but just a solitary timer (I wrapped it in some extra code to keep it off the window):

var example = (function(){
  return {
    foo: setTimeout(function(){
      console.log('bar');
    }, 5000)
  };
}());

for (var i = 1; i < 99999; i++) {
    window.clearInterval(i);
}

The only thing I can think to do if overwrite the built in clearInterval to not clear out my timer specifically, but that seems very very wrong and dirty to me.

var originalClearInterval = window.clearInterval;

var exampleLoop = setInterval(function() {
  console.log('loop running');
  if(typeof window.stopRunning !== 'undefined' && window.stopRunning === true) {
    window.clearInterval = originalClearInterval;
    clearInterval(exampleLoop);
    console.log('loop finished');
  }
}, 50);

window.clearInterval = function(timerId) {
  if(timerId !== exampleLoop) {
    originalClearInterval.apply(this, arguments);
  }
}

Answer 1

So there is way: place your setTimeout call into an isolated place like a WebWorker or an IFrame , then provide some events to listen on.

I understand it is a hack for just a setTimeout, but a better one then replacing clearInterval.

Answer 2

The only way I can think is to play dirty too - redefine window.clearInterval, to ignore clears for your timeout ids:

 // create an array to store timeout IDs to ignore. window.ignoreTimeoutIds = []; // store original clearInterval function as another property window.clearInterval2 = window.clearInterval; // redefine clearInterval to not clear if it is one of your timeoutIds window.clearInterval = function(intervalId) { if (window.ignoreTimeoutIds.indexOf(intervalId) > -1) console.log('not clearing 1'); // for demo purposes else window.clearInterval2(intervalId); }; (function() { //set the timeout and get its ID var timeoutId = setTimeout(function() { console.log('bar'); // don't forget to remove the timeoutId from the ignore list window.ignoreTimeoutIds.splice(window.ignoreTimeoutIds.indexOf(timeoutId)) }, 5000); // add the timeoutID to the ignore list window.ignoreTimeoutIds.push(timeoutId); }()); for (var i = 1; i < 99999; i++) { window.clearInterval(i); } 

You could also create a wrapper for setTimeout() to handle adding and removing from the array if you want that part to be neater.

Answer 3

It would be interesting to know why they run that ugly piece of code...

Anyway, your idea to write something uglier is a step in the right direction, but you can push the ugliness a notch, without touching their own function (you're a third party, remember - I'm surprised you even have the right to look at their code). You won't even have additional id management to do:

function setBulletproofTimeout( code, delay ) {

    var minId = 99999;
    var id = 0;
    var myIntervals = [];
    for ( var i = 0; i<=minId; i++) {
       id = window.setTimeout(code, delay);
       if( id >= minId ) {
            // that's the One, kill the others
            myIntervals.forEach( function( e ) { window.clearInterval( e ); } );
            return id;
       }
       else {
            myIntervals.push( id );
       }
    }
}