CODEWITHSUNDEEP
javascriptclearinterval
Ankur Garg
Ankur Garg

Reputation: 2853

ClearInterval not clearing SetInterval

When we call clearInterval with the value returned by SetInterval does it make that value null or undefined.

I am calling clearInterval to clear setInterval but apparently value of setInterval remains same and does not change even after calling clearInterval . Is t suppposed to be null or undefined ? Here is my code snippet 

var setIntervalId; // declared in global scope
//lined of code

function autorefresh() {
  if (statesCount > 0) {
    setIntervalId = setInterval(function() {
        //lines of code
        // calling some handler
    }, 30000);
  }

  if (statesCount === 0) {
    clearInterval(setIntervalId);
  }
}

As you can see I am calling my setInterval function every 30 seconds , when called for the first time assigns some value to setIntervalId , but even after calling clearInterval the value persists. Should it become null or undefined after calling clearInterval?If it should be null or undefined what should I do here.I have defined setIntervalId in global scope.

Upvotes: 6

Views: 16599

Answers (4)

fejiro eni
fejiro eni

Reputation: 61

Ok, I have suffered this same problem too many time and usually I just let it be, But most times I realize that after clearing interval the interval continues to run, and this might affect the performance of the device (it's like having an infinite loop).

So I did a little bit of research and I found out what the problem was and I wrote a simple code to solve it.

Now when you start an interval (most likely triggered by an event) in most cases, more than one instance of that interval is declared (for whatever reason)...

So when you clear the interval later, you only clear the *top-level interval, and the next level interval sets in. (top-level might not be the correct word)

So to truly clear the interval I used the method below:

Setting the interval:

if(!timer)   
    timer =setInterval(myFunction, 1000);

Clearing the interval:

clearInterval(timer);
timer=null;
while (timer!== null){
    timer=null;
}

you might decide to clear the interval inside the while loop, but I found that this works for me and it's quite efficient than that.

Make sure you check the scope of the interval variable (i.e timer in the case above)

Upvotes: 5

DevWL
DevWL

Reputation: 18860

This should work fine if you allow only one interval at the time.

If you allow more than one interval you need to maintain access to each instances in order to stop them.

var setIntervalId; // declared in global scope
var statesCount = 1; // simulate active state
//lined of code


function autorefresh() {
  if (statesCount > 0) {
    console.log('started');
    setIntervalId = setInterval(function() {
      // just to see whats happening in console
      console.log(statesCount);

      // performe interval checks inside the interval loop not outside if you want to stop it automaticaly
      if (statesCount === 0) {
        clearInterval(setIntervalId);
      }
      // lines of code
      // calling some handler
    }, 1000); // repeat every 1s
  };
}

// run interval
autorefresh();

// stimulate change of stateCount after 5s
// setTimeout(function(){
//   statesCount = 1;
// },5000);

// clear interval after 10s
setTimeout(function(){
  clearInterval(setIntervalId);
  console.log('stoped');
},10000);

Upvotes: 0

Quentin
Quentin

Reputation: 944530

Should it become null or undefined after calling clearInterval?

No.

It is just a number. When the interval has been cleared, that number is just a historical curiosity.

You can explicitly assign undefined to it after you use it to clearInterval if you like. There is no need to do this unless you are using it to track if your function is currently being periodically run or not.

Upvotes: 7

JaredPar
JaredPar

Reputation: 755567

The function clearInterval will not clear the value that is passed into it. If you want to clear it you must do that yourself

clearInterval(setIntervalId);
setIntervalId = undefined;

Note that it doesn't appear like you are properly guarding the initial call to setInterval. This could result in the call being made multiple times and hence you having multiple interval setups. I think you should augment your initial if block to the following 

if (statesCount > 0 && typeof(setIntervalId) === 'undefined') { 
  ...
}

Upvotes: 11

Related Questions