clearInterval not for setInterval function

Question

I’m studying the timing function in Javascript and I’m not able to make setInterval() stop through clearInterval()

var timer = function(){
    setInterval(() => {
        console.log(count);
        count++
        }, 200)}



var stop = function(){
    setTimeout(() => {
        clearInterval(timer)
        console.log('executei');        
            }, 2000)
    }
timer()
stop()

On the console to see that the stop function is apparently running, but the timer continues to run.

index.js:5 1
        index.js:5 2
        index.js:5 3
        index.js:5 4
        index.js:5 5
        index.js:5 6
        index.js:5 7
        index.js:5 8
        index.js:5 9
        index.js:14 executei
        index.js:5 10
        index.js:5 11
        index.js:5 12
        index.js:5 13
        index.js:5 14
        index.js:5 15
        index.js:5 16
        index.js:5 17

Answer 1

The function clearInterval must receive the return of the function setInterval, but how you encapsulated the setInterval, ended up passing the function timer as a parameter, so your setInterval will continue to be executed.

---

You can create a variable to save the return of setInterval, with this it will be possible to pass the same as parameter to the clearInterval:

let intervalo = null;

var timer = function(){
    let count = 0;
    intervalo = setInterval(() => {
        console.log(count);
        count++
        }, 200)}

var stop = function(){
    setTimeout(() => {
        clearInterval(intervalo)
        console.log('executei');        
            }, 2000)
    }

timer();
stop();

---

It is also possible to change the function timer to return the interval and the function stop to receive the range per parameter:

var timer = function(){
    let count = 0;

    const intervalo = setInterval(() => {
        console.log(count);
        count++
        }, 200);

    return intervalo;
}

var stop = function(intervalo){
    setTimeout(() => {
        clearInterval(intervalo);
        console.log('executei');        
            }, 2000);
}

let intervalo = timer();
stop(intervalo);

---

Documentations:

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval

Answer 2

The value of timer is not a "ID" of the setInterval, is an anonymous function that you set:

var timer = function(){

There’s no way clearInterval guess what’s inside the function, you have to take the return of setInterval and expose in a variable, something like:

var interval, count = 0;

var timer = function(){
    interval = setInterval(() => {
        console.log(count);
        count++
     }, 200)
};

var stop = function(){
    setTimeout(() => {
        clearInterval(interval)
        console.log('executei');        
    }, 2000)
};

timer()
stop()

In fact you don’t even have to declare a series of functions, it would be better to play in direct functions:

var interval, count = 0;

function timer(){
    interval = setInterval(() => {
        console.log(count);
        count++
     }, 200)
}

function stop() {
    setTimeout(() => {
        clearInterval(interval)
        console.log('executei');        
    }, 2000)
}

timer()
stop()

See here the difference of var funcao = function and function funcao()