Artigos JavaScript JavaScript setInterval: executando funções repetidamente

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
Execute o código

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
Execute o código

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
Execute o código

Veja também como usar o JavaScript setTimeout