Why clearInterval doesn't work if the setInterval was inside the function?

Question

function consoleTest() {
    setInterval(function(){
     console.log('Hello World');
    }, 1000);
}

$('#button').on('click', function(){
    clearInterval(consoleTest);
});

consoleTest();

I created a simple app when I click the button it will stop/pause the interval. I know how to make it work I just need to declare a variable outside the function and contain there the setInterval, now I am just confused why clearInterval won't work if I call it via a function, somebody please explain it to me.

Koby Douek · Answer 1 · 2017-03-09T07:53:04.013

6

This is the correct usage of setInterval and cleaInterval. setInterval returnes a value which you need to keep in a variable scoped for both function. When you want to clear the interval, use clearInterval and pass it the variable as a parameter:

var interval;

function consoleTest() {
    interval = setInterval(function() {
        console.log('Hello World');
    }, 1000);
}

$('#button').on('click', function() {
    clearInterval(interval);
});

consoleTest();

For further reading: clearInterval and setInterval.

edited Mar 09 '17 at 07:53

answered Mar 09 '17 at 07:46

Koby Douek

16,156
19
74
103

2

Hey @RoryMcCrossan, I added explenations. If it's not too much trouble, I'd appreicate clearing the comments section. – Koby Douek Mar 09 '17 at 07:52
Thanks Koby, it make sense to me now. – Ron Mar 09 '17 at 08:06
Glad I could help. Happy coding ! – Koby Douek Mar 09 '17 at 08:07

score 2 · Answer 2 · answered Mar 09 '17 at 07:46

There's two issues here. Firstly you don't set the returned timer id from setInterval() anywhere. consoleTest is the function that wraps the timer, not a reference to the timer, which is what should be given to clearInterval(). Secondly, you need that timer reference to be in scope of both functions. With that in mind, try this:

function consoleTest() {
  return setInterval(function(){
    console.log('Hello World');
  }, 1000);
}

$('#button').on('click', function(){
  clearInterval(interval);
});

var interval = consoleTest();

Wow! another great explanation, thanks Rory. – Ron Mar 09 '17 at 08:09 — Ron, Mar 09 '17 at 08:09

Why clearInterval doesn't work if the setInterval was inside the function?

2 Answers2