ClearInterval not working

Question

This is most likely just a syntax error on my part. But resizeTime just won't find out. The timer simply continues to work regardless of the use of clearInterval on it more than once. Any ideas? I posted my real code:

var resizeTime; // declared outside of wrapper function to INSURE no second declaration will occur var myTransitionEvent = whichTransitionEvent(); $(window).bind('adapt', function(){ console.log('start', resizeTime); resizeTime = setInterval(function(){ console.log('go', resizeTime); methods.relayoutChildren.apply(self); }, 5); setTimeout(function(){ console.log('sNend', resizeTime); clearInterval(resizeTime); },1000); }); $('#allies-wrap').bind(myTransitionEvent, function(){ console.log('end', resizeTime); clearInterval(resizeTime); methods.relayoutChildren.apply(self); }); 

Here is an example of a chrome magazine:

  start undefined start 8215 (10) go 8218 start 8218 start 8221 (256) go 8224 (2) sNend 8224 (9) go 8224 sNend 8224 (3) go 8224 sNend 8224 (2596) go 8224 

for those who do not know the chrome magazine, (2596) means 2596 cases of an identical magazine.

Answer 1

I think the transition event does not adapt , but the adapt event fires again and again. Therefore, resizeTime changed before the active is cleared. You can fix this (at least do better) by clearing the interval before setting a new one.

 clearInterval(resizeTime); resizeTime = setInterval(function(){ console.log('go', resizeTime); methods.relayoutChildren.apply(self); }, 5); clearTimeout(sNendTime); sNendTime = setTimeout(function(){ console.log('sNend', resizeTime); clearInterval(resizeTime); },1000); 

EDIT:

What's going on is

• adapt trigger events
• New interval set and interval ID assigned by resizeTime
• New timeout set
• So, now 2 things are active - 1 interval, 1 timeout
• Before the time delay expires, adapt event triggers again
• New interval set and interval ID assigned by resizeTime
• As you rewrite resizeTime id to the previous interval, it is lost, but this interval is still active
• New timeout set
• So, now 4 things are active - 2 intervals, 2 timeouts
• It continues
• After 1000 seconds, let's say there are 20 intervals, 20 timeouts are active.
• The first timeout calls the function and clears the interval pointed to by the 20th value of resizeTime
• Thus, 19 intervals and 19 timeouts are saved.
• It continues
• Even if transitionevent triggers will only clear the last interval

For your code to work, there must be a transitionevent after each adapt event, but it doesn't exist. Thus, we must clear the active interval and the active timeout so that only one of the active ones is active each time, and when the timeout ends, the function also clears the interval.