Eventos de temporização JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
|
JavaScript pode ser executado em intervalos de tempo. Isso é chamado de eventos de tempo. |
Eventos de tempo
O window
objeto permite a execução de código em intervalos de tempo especificados.
Esses intervalos de tempo são chamados de eventos de tempo.
Os dois métodos principais a serem usados com JavaScript são:
setTimeout(function, milliseconds
)
Executa uma função, após aguardar um número especificado de milissegundos.setInterval(function, milliseconds
)
O mesmo que setTimeout(), mas repete a execução da função continuamente.
O setTimeout()
e setInterval()
são ambos os métodos do objeto HTML DOM Window.
O método setTimeout()
window.setTimeout(function, milliseconds);
O window.setTimeout()
método pode ser escrito sem o prefixo da janela.
O primeiro parâmetro é uma função a ser executada.
O segundo parâmetro indica o número de milissegundos antes da execução.
Exemplo
Clique em um botão. Aguarde 3 segundos e a página alertará "Olá":
<button onclick="setTimeout(myFunction, 3000)">Try it</button>
<script>
function myFunction() {
alert('Hello');
}
</script>
Como parar a execução?
O clearTimeout()
método interrompe a execução da função especificada em setTimeout().
window.clearTimeout(timeoutVariable)
O window.clearTimeout()
método pode ser escrito sem o prefixo da janela.
O clearTimeout()
método usa a variável retornada de setTimeout()
:
myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);
Se a função ainda não foi executada, você pode interromper a execução chamando o clearTimeout()
método:
Exemplo
Mesmo exemplo acima, mas com um botão "Parar" adicionado:
<button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button>
<button onclick="clearTimeout(myVar)">Stop it</button>
O método setInterval()
O setInterval()
método repete uma determinada função em cada intervalo de tempo determinado.
window.setInterval(function, milliseconds);
O window.setInterval()
método pode ser escrito sem o prefixo da janela.
O primeiro parâmetro é a função a ser executada.
O segundo parâmetro indica a duração do intervalo de tempo entre cada execução.
Este exemplo executa uma função chamada "myTimer" uma vez a cada segundo (como um relógio digital).
Exemplo
Exibir a hora atual:
setInterval(myTimer, 1000);
function myTimer() {
const d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
Existem 1000 milissegundos em um segundo.
Como parar a execução?
O clearInterval()
método interrompe as execuções da função especificada no método setInterval().
window.clearInterval(timerVariable)
O window.clearInterval()
método pode ser escrito sem o prefixo da janela.
O clearInterval()
método usa a variável retornada de setInterval()
:
let myVar = setInterval(function, milliseconds);
clearInterval(myVar);
Exemplo
Mesmo exemplo acima, mas adicionamos um botão "Stop time":
<p id="demo"></p>
<button onclick="clearInterval(myVar)">Stop time</button>
<script>
let myVar = setInterval(myTimer, 1000);
function myTimer() {
const d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>