Neste tutorial, você aprenderá sobre o método setInterval () do JavaScript com a ajuda de exemplos.
Em JavaScript, um bloco de código pode ser executado em intervalos de tempo especificados. Esses intervalos de tempo são chamados de eventos de temporização.
Existem dois métodos para executar código em intervalos específicos. Eles são:
- setInterval ()
- setTimeout ()
Neste tutorial, você aprenderá sobre o setInterval()método.
JavaScript setInterval ()
O setInterval()método repete um bloco de código a cada evento de temporização determinado.
A sintaxe comumente usada do JavaScript setInterval é:
setInterval(function, milliseconds);
Seus parâmetros são:
- função - uma função que contém um bloco de código
- milissegundos - o intervalo de tempo entre a execução da função
O setInterval()método retorna um intervalID que é um número inteiro positivo.
Exemplo 1: exibir um texto uma vez a cada 1 segundo
// program to display a text using setInterval method function greet() ( console.log('Hello world'); ) setInterval(greet, 1000);
Resultado
Hello world Hello world Hello world Hello world Hello world….
No programa acima, o setInterval()método chama a greet()função a cada 1000 milissegundos ( 1 segundo).
Portanto, o programa exibe o texto Hello world uma vez a cada 1 segundo.
Observação : o setInterval()método é útil quando você deseja repetir um bloco de código várias vezes. Por exemplo, mostrando uma mensagem em um intervalo fixo.
Exemplo 2: Exibir o tempo a cada 5 segundos
// program to display time every 5 seconds function showTime() ( // return new date and time let dateTime= new Date(); // return the time let time = dateTime.toLocaleTimeString(); console.log(time) ) let display = setInterval(showTime, 5000);
Resultado
"17:15:28" "17:15:33" "17:15:38"….
O programa acima exibe a hora atual uma vez a cada 5 segundos.
new Date()fornece a data e a hora atuais. E toLocaleTimeString()retorna a hora atual. Para saber mais sobre data e hora, visite JavaScript Date and Time.
JavaScript clearInterval ()
Como você viu no exemplo acima, o programa executa um bloco de código a cada intervalo de tempo especificado. Se você quiser parar esta chamada de função, você pode usar o clearInterval()método.
A sintaxe do clearInterval()método é:
clearInterval(intervalID);
Aqui, intervalIDé o valor de retorno do setInterval()método.
Exemplo 3: Use o Método clearInterval ()
// program to stop the setInterval() method after five times let count = 0; // function creation let interval = setInterval(function()( // increasing the count by 1 count += 1; // when count equals to 5, stop the function if(count === 5)( clearInterval(interval); ) // display the current time let dateTime= new Date(); let time = dateTime.toLocaleTimeString(); console.log(time); ), 2000);
Resultado
4:47:41 PM 4:47:43 PM 4:47:45 PM 4:47:47 PM 4:47:49 PM
No programa acima, o setInterval()método é usado para exibir a hora atual a cada 2 segundos. O clearInterval()método interrompe a chamada de função após 5 vezes.
Você também pode passar argumentos adicionais para o setInterval()método. A sintaxe é:
setInterval(function, milliseconds, parameter1,… .paramenterN);
Quando você passar parâmetros adicionais ao setInterval()método, estes parâmetros ( parameter1, parameter2, etc.) serão passados para o especificado função .
Por exemplo,
// program to display a name function greet(name, lastName) ( console.log('Hello' + ' ' + name + ' ' + lastName); ) // passing argument to setInterval setInterval(greet, 1000, 'John', 'Doe');
Resultado
Hello John Doe Hello John Doe Hello John Doe….
No programa acima, dois parâmetros Johne Doesão passados para o setInterval()método. Esses dois parâmetros são os argumentos que serão passados para a função (aqui, greet()função) que é definida dentro do setInterval()método.
Observação: se você só precisar executar uma função uma vez, é melhor usar o método setTimeout ().
