Método setInterval() da Window

Definição e uso

setInterval() método para chamar a função a intervalos de tempo especificados (em milissegundos).

setInterval() O método chama periodicamente a função até que seja chamado clearInterval() ou feche a janela.

Comentário:1 segundo = 1000 milissegundos.

Avisos

Para executar a função apenas uma vez, use setTimeout() método.

Para limpar o intervalo, use setInterval() ID retornado:

myInterval = setInterval(function, milliseconds);

Depois disso, você pode chamar clearInterval() para parar a execução:

clearInterval(myInterval);

Veja também:

Método clearInterval()

Método setTimeout()

Método clearInterval()

Exemplo

Exemplo 1

Mostra "Hello" a cada segundo (1000 milissegundos):

setInterval(function () {element.innerHTML += "Hello"}, 1000);

Experimente pessoalmente

Exemplo 2

Chama displayHello a cada segundo:

setInterval(displayHello, 1000);

Experimente pessoalmente

Mais exemplos estão disponíveis na parte inferior da página.

Sintaxe

setInterval(function, milliseconds, param1, param2, ...)

Parâmetros

Parâmetros Descrição
function Obrigatório. Função a ser executada
milliseconds

Obrigatório. Intervalo de execução.

Se o valor for menor que 10, use 10.
param1, param2, ...

Opcional. Parâmetros adicionais passados para a função.

IE9 e versões anteriores não suportam.

Retorno

Tipo Descrição
Número

ID do temporizador.

Por favor, associe este id com clearInterval() Usar juntos para cancelar o temporizador.

Suporte do navegador

Todos os navegadores suportam setInterval()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte Suporte

Mais exemplos

Exemplo 3

Mostrar a hora como um relógio digital:

setInterval(myTimer, 1000);
function myTimer() {
  const date = new Date();
document.getElementById("demo").innerHTML = date.toLocaleTimeString();
}

Experimente pessoalmente

Exemplo 4

Parar o relógio digital usando clearInterval():

const myInterval = setInterval(myTimer, 1000);
function myTimer() {
  const date = new Date();
  document.getElementById("demo").innerHTML = date.toLocaleTimeString();
}
function myStopFunction() {
  clearInterval(myInterval);
}

Experimente pessoalmente

Exemplo 5

Criar uma barra de progresso dinâmica usando setInterval() e clearInterval():

function move() {
  const element = document.getElementById("myBar");
  let width = 0;
  let id = setInterval(frame, 10);
  function frame() {
    if (width == 100) {
      clearInterval(id);
    } else {
      width++;
      element.style.width = width + '%';
    }
  }
}

Experimente pessoalmente

Exemplo 6

Alternar entre duas cores de fundo a cada 500 milissegundos:

const myInterval = setInterval(setColor, 500);
function setColor() {
  let x = document.body;
  x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";
}
function stopColor() {
  clearInterval(myInterval);
}

Experimente pessoalmente

Exemplo 7

Passar parâmetros para a função (não funciona em versões do IE9 ou anteriores):

setInterval(myFunc, 2000, "param1", "param2");

Experimente pessoalmente

Mas, se você usar uma função anônima, é compatível com todos os navegadores:

setInterval(function() {myFunc("param1", "param2")}, 2000);

Experimente pessoalmente