setInterval e clearInterval():
O setInterval() é uma função temporizadora. Ela executa uma função de retorno após determinado tempo. A função setInterval() executará infinitamente, até que você execute a função clearInterval().
Se você é iniciante, você pode pular a explicação Como funciona.
Como funciona?
Sendo uma função assíncrona, a instrução a ser executada é lançada no Event Loop. Mas o que é Event Loop? É uma instrução síncrona, ou seja, quando ela estiver executando, a thread ficará bloqueada e, assim que terminar, a próxima instrução é executada. Como o setInterval() executará infinitamente, sabemos que ele adicionará uma instrução ao Event Loop a cada quantia de tempo que for definida.
Definição:
O setInterval() chama uma função em intervalos de tempo definidos. Ele continuará chamando a função até que o clearInterval() seja chamado, ou que a página seja fechada.
Sintaxe:
// sintaxe da função setInterval, que define um temporizador // que disparará uma ação definida em tempo estipulado setInterval(function, miliseconds, parameter1, parameter2, …);
Onde:
function: é a função que será executada;
miliseconds: é o intervalo em milisegundos(ms) em que o código será executado. Se o valor especificado for menor que 10, o valor 10 será utilizado.
parameter: parâmetros para passar para a função.
Exemplo:
<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>setInterval() e clearInterval()</title> </head> <body> <button id="btn">Clique aqui para iniciar</button> <script src="main.js"></script> </body> </html>
E no JavaScript:
// Crie uma variável let variavel; // Crie uma função, utilizando essa variável para // declarar o intervalo em que será disparado. function minhaFuncao() { variavel = setInterval(consoleLog, 2000); } // Mensagem que será mostrada no console function consoleLog() { console.log("Ola mundo!"); } // Função será chamada utilizando o evento onclick document.getElementById("btn").onclick = minhaFuncao;
O clearInterval() limpa o timer configurado pela função setInterval(). Ele desativa a função e não executa a função definida pelo temporizador.
Sintaxe:
// Função clearInterval travará a execução do setInterval // bloqueando a ação definida pelo temporizador clearInterval(id_do_setInterval)
Exemplo:
<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>setInterval() e clearInterval()</title> </head> <body> <button id="btn">Clique aqui para iniciar</button> <button id="btn2">Clique aqui para parar</button> <script src="main.js"></script> </body> </html>
E no JavaScript:
// Crie uma variável let variavel; // Crie uma função, utilizando essa variável para // declarar o intervalo em que será disparado. function minhaFuncao() { variavel = setInterval(consoleLog, 2000); } // Mensagem que será mostrada no console function consoleLog() { console.log("Ola mundo!"); } // Função que será executada para bloquear // a ação do temporizador definido no setInterval function pararFuncao() { clearInterval(variavel); } // Função será chamada utilizando o evento onclick document.getElementById("btn").onclick = minhaFuncao; document.getElementById("btn2").onclick = pararFuncao;
Gostou deste artigo? Deixe o seu comentário abaixo: