JavaScript setInterval: executando funções repetidamente
Nesta documentação de JavaScript falaremos sobre o método setInterval, que nos permite executar uma função repetidas vezes em um espaço de tempo definido.
JavaScript setInterval()
Nesta documentação de JavaScript veremos como o método setInterval() nos permite executar uma função repetidamente em um espaço de tempo definido.
Apresentaremos aqui como utilizar o método setInterval().
JavaScript setInterval(): na prática
function horarioAtual() {
let hora = new Date().toLocaleTimeString();
console.log(hora);
}
setInterval(horarioAtual, 1000);
Código 1. Exemplo
de uso do setInterval()
Como funciona o setInterval?
O método setInterval precisa de pelo menos dois parâmetros para funcionar. O primeiro é a função que será executada, enquanto o segundo é o tempo em milissegundos em que a função deve se repetir.
Veja o exemplo do Código 2.
function horaAtual() {
let hora = new Date().toLocaleTimeString();
console.log(hora);
}
setInterval(horaAtual, 1000);
Código 2. Exemplo
de uso do setInterval()
Nesse exemplo, o que ocorre é que a função horaAtual será executada a cada 1000 milissegundos (1 segundo), para exibir o horário atual.
Sintaxe
A sintaxe do setInterval é dividida em três partes: função, intervalo e parâmetros opcionais.
Função (obrigatório)
Essa é a função que o setInterval deverá repetir. Ela é o primeiro parâmetro a ser passado, como vemos no Código 3.
setInterval(funcao)Código 3. setInterval repetindo uma função
Intervalo (Opcional)
O segundo parâmetro é o intervalo de tempo em que a função deve se repetir. Esse valor é dado em milissegundos, sendo: 1000ms = 1s, como vemos no Código 4.
Esse parâmetro é opcional e se nenhum valor for informado, o valor 0 será definido como padrão.
setInterval(funcao, 1000);Código 4. setInterval repetindo uma função a cada segundo
Apesar de ser um parâmetro opcional, o recomendado é que por boas práticas, esse valor seja sempre informado.
Importante: Se você quiser que a função seja repetida o tempo todo, basta passar o valor 0 no parâmetro intervalo.Parâmetros opcionais
Após o intervalo, é possível passar parâmetros opcionais para a função que é chamada. Você pode passar quantos parâmetros forem necessários, como vemos no Código 5.
setInterval(funcao, 1000, 20, 8)Código 5. setInterval
repetindo uma função a cada segundo e passando os valores 20 e 8 como
parâmetros
Exemplo
Veja mais um exemplo de uso do setInterval() no Código 6.
function soma(a, b)
{
console.log(a + b);
}
setInterval(soma, 3000, 20, 30);
Código 6. Função
soma chamada a cada três segundos com dois parâmetros opcionais extras
A cada três segundos a função soma será chamada e mostrará o resultado 50 no console.
Exemplo de setInterval
Exemplo 1
No Código 7 a seguir demonstramos como utilizar o setInterval da maneira tradicional, chamando o nome de uma função.
let contador = 0;
function somaContador(valor)
{
contador = contador + valor;
console.log(contador);
}
setInterval(somaContador, 1000, 1);
Código 7. Utilização do setInterval da maneira tradicional
Exemplo 2
Também é possível executar o mesmo código passando diretamente o código da função para o setInterval, com mostra o Código 8.
setInterval(function somaContador(valor)
{
contador = contador + valor;
console.log(contador);
}, 1000, 1);
Código 8. Passando o código da função diretamente para o setInterval
Exemplo 3
Você pode ainda passar uma função anônima, ou array function, que o setInterval também funcionará do mesmo modo, como apresentado no Código 9.
let contador = 0;
setInterval((valor) => {
contador = contador + valor;
console.log(contador);
}, 1000, 1);
Código 9. Passando uma função
Veja também como usar o JavaScript setTimeout
Artigos relacionados
-
Artigo
-
Artigo
-
Artigo
-
Artigo
-
Artigo