Neste tutorial, você aprenderá sobre o método setTimeout () do JavaScript com a ajuda de exemplos.
O setTimeout()método executa um bloco de código após o tempo especificado. O método executa o código apenas uma vez.
A sintaxe comumente usada de setTimeout JavaScript é:
setTimeout(function, milliseconds);
Seus parâmetros são:
- função - uma função que contém um bloco de código
- milissegundos - o tempo após o qual a função é executada
O setTimeout()método retorna um intervalID , que é um número inteiro positivo.
Exemplo 1: exibir um texto uma vez após 3 segundos
// program to display a text using setTimeout method function greet() ( console.log('Hello world'); ) setTimeout(greet, 3000); console.log('This message is shown first');
Resultado
Esta mensagem é mostrada primeiro Olá, mundo
No programa acima, o setTimeout()método chama a greet()função após 3.000 milissegundos ( 3 segundos).
Portanto, o programa exibe o texto Hello world apenas uma vez após 3 segundos.
Nota : o setTimeout()método é útil quando você deseja executar um bloco uma vez após algum tempo. Por exemplo, mostrar uma mensagem a um usuário após o tempo especificado.
O setTimeout()método retorna o id do intervalo. Por exemplo,
// program to display a text using setTimeout method function greet() ( console.log('Hello world'); ) let intervalId = setTimeout(greet, 3000); console.log('Id: ' + intervalId);
Resultado
Id: 3 Olá, mundo
Exemplo 2: Exibir o tempo a cada 3 segundos
// program to display time every 3 seconds function showTime() ( // return new date and time let dateTime= new Date(); // returns the current local time let time = dateTime.toLocaleTimeString(); console.log(time) // display the time after 3 seconds setTimeout(showTime, 3000); ) // calling the function showTime();
Resultado
17:45:39 17:45:43 17:45:47 17:45:50 …
O programa acima exibe a hora a cada 3 segundos.
O setTimeout()método chama a função apenas uma vez após o intervalo de tempo (aqui, 3 segundos).
No entanto, no programa acima, como a função está chamando a si mesma, o programa exibe a hora a cada 3 segundos.
Este programa funciona indefinidamente (até que a memória se esgote).
Observação : se você precisar executar uma função várias vezes, é melhor usar o setInterval()método.
JavaScript clearTimeout ()
Como você viu no exemplo acima, o programa executa um bloco de código após o intervalo de tempo especificado. Se você quiser parar esta chamada de função, você pode usar o clearTimeout()método.
A sintaxe do clearTimeout()método é:
clearTimeout(intervalID);
Aqui, intervalIDé o valor de retorno do setTimeout()método.
Exemplo 3: Use o Método clearTimeout ()
// program to stop the setTimeout() method let count = 0; // function creation function increaseCount()( // increasing the count by 1 count += 1; console.log(count) ) let id = setTimeout(increaseCount, 3000); // clearTimeout clearTimeout(id); console.log('setTimeout is stopped.');
Resultado
setTimeout está parado.
No programa acima, o setTimeout()método é usado para aumentar o valor da contagem após 3 segundos. No entanto, o clearTimeout()método interrompe a chamada de função do setTimeout()método. Portanto, o valor da contagem não é aumentado.
Observação : geralmente você usa o clearTimeout()método quando precisa cancelar a setTimeout()chamada do método antes que aconteça.
Você também pode passar argumentos adicionais para o setTimeout()método. A sintaxe é:
setTimeout(function, milliseconds, parameter1,… .paramenterN);
Quando você passar parâmetros adicionais ao setTimeout()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 setTimeout setTimeout(greet, 1000, 'John', 'Doe');
Resultado
Ola john doe
No programa acima, dois parâmetros Johne Doesão passados para o setTimeout()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 setTimeout()método.
Leitura recomendada: JavaScript async () e await ()
