0

Estou estudando as função de temporização no Javascript e não estou conseguindo fazer o setInterval() parar por meio do clearInterval()

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



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

No console da pra ver que a função stop aparentemente tá executando, mas o timer continua a rodar.

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
1
  • var timer tem que receber setInterval, mas está recebendo function.
    – Benilson
    Commented 27/05/2020 às 17:52

2 Respostas 2

3

A função clearInterval deve receber o retorno da função setInterval, porém como você encapsulou a setInterval, acabou passando a função timer como parâmetro, logo seu setInterval vai continuar a ser executado.


Você pode criar uma variável para guardar o retorno do setInterval, com isso será possível passar a mesma como parâmetro para a 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();


Também é possível alterar a função timer para retornar o intervalo e a função stop para receber o intervalo por parâmetro:

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);


Documentações:

https://developer.mozilla.org/pt-BR/docs/Web/API/WindowOrWorkerGlobalScope/setInterval

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

3

O valor de timer não é um "ID" do return do setInterval, é um uma função anonima que você setou:

var timer = function(){

Não tem como clearInterval adivinhar o que tem dentro da função, você tem que pegar o retorno de setInterval e expor em uma variável, algo como:

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()

Na verdade nem precisa ficar declarando uma série de funções, seria melhor jogar em funções diretas:

var interval, count = 0;

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

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

timer()
stop()

Veja aqui a diferença de var funcao = function e function funcao()

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .