clearInterval not working

Question

This most likely just a frustration syntax error on my part. But resizeTime just won't clear. The timer just keeps going regardless of using clearInterval on it more than once. Any ideas folks? I have 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 a sample log from chrome:

  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 don't know chrome's log, (2596) means 2596 occurrences of an identical log.

Answer 1

I think Transition event is not getting triggered but adapt event gets triggered again and again. So resizeTime changes before the active one gets cleared. You can fix it ( at least make it better ) by clearing the interval before setting 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 happens is

1. adapt event triggers
2. A new interval is set and interval id assigned to resizeTime
3. A new timeout is set
4. So now 2 things are active - 1 interval, 1 timeout
5. Before the time out delay elapses, again adapt event triggers
6. A new interval is set and interval id assigned to resizeTime
7. As resizeTime gets overwritten the id to previous interval is lost, but that interval still active
8. A new timeout is set
9. So now 4 things active - 2 intervals, 2 timeouts
10. It goes on
11. After 1000s , say there are 20 intervals , 20 timeouts active
12. First time out invokes the function and it clears the interval pointed by 20th value of resizeTime
13. So still 19 intervals and 19 timeouts active
14. It goes on
15. Even if transitionevent triggers it will only clear the latest interval

For your code to work there should be a transitionevent after each adapt event, but there is not. So we have to clear the active interval and active timeout so that there will be only one of each active at a time, and when timeout ends the function clears interval also.