Eventos de Temporização JavaScript

JavaScript pode ser executado em intervalos de tempo.

Este é o que se chama de evento programado (Timing Events).

Eventos de Tempo

O objeto Window permite executar código a intervalos de tempo especificados.

Estes intervalos de tempo chamam-se eventos de tempo.

Existem dois métodos principais usados pelo JavaScript:

setTimeout(function, milissegundos)
executa a função após esperar o número especificado de milissegundos.
setInterval(function, milissegundos)
equivalente a setTimeout(), mas executa repetidamente a função.

setTimeout() e Método setInterval() todos eles pertencem ao objeto Window do DOM HTML.

Método setTimeout()

window.setTimeout(function, milissegundos);

window.setTimeout() O método pode não ter window com prefixo para escrever.

O primeiro parâmetro é a função a ser executada.

O segundo parâmetro indica o número de milissegundos antes da execução.

Exemplo

Clique no botão. Aguarde 3 segundos e uma mensagem "Hello" será exibida na página:

<button onclick="setTimeout(myFunction, 3000)">Experimente</button>
<script>
function myFunction() {
    alert('Hello');
 }
</script>

Experimente você mesmo

Como parar a execução?

clearTimeout() método para parar a execução setTimeout() a função especificada no prazo estabelecido.

window.clearTimeout(timeoutVariable)

window.clearTimeout() O método pode não ter window com prefixo para escrever.

clearTimeout() usando setTimeout() Variável retornada:

myVar = setTimeout(function, milissegundos);
clearTimeout(myVar);

Exemplo

Como no exemplo anterior, mas com um botão "Parar":

<button onclick="myVar = setTimeout(myFunction, 3000)">Experimente</button>
<button onclick="clearTimeout(myVar)">Parar execução</button>

Experimente você mesmo

Método setInterval()

Método setInterval() O método repete a função fornecida a cada intervalo de tempo dado.

window.setInterval(function, milissegundos);

window.setInterval() O método pode não ter window com prefixo para escrever.

O primeiro parâmetro é a função a ser executada.

O segundo parâmetro é o comprimento do intervalo de tempo entre cada execução.

Neste exemplo, a função "myTimer" é executada a cada segundo (como um relógio digital).

Exemplo

Exibir a hora atual:

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

Experimente você mesmo

Um segundo tem 1000 milissegundos.

Como parar a execução?

Método clearInterval() método para parar Método setInterval() execução da função especificada no método.

window.clearInterval(timerVariable)

window.clearInterval() Pode ser escrito sem o prefixo window.

Método clearInterval() O método setInterval() usa: Método setInterval() Variável retornada:

myVar = setInterval(function, milissegundos);
clearInterval(myVar);

Exemplo

Semelhante ao exemplo anterior, mas adicionamos um botão "Parar Tempo":

<p id="demo"></p>
<button onclick="clearInterval(myVar)">Parar Tempo</button>
<script>
var myVar = setInterval(myTimer, 1000);
 function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>

Experimente você mesmo

Mais Exemplos

Outro relógio simples
Relógio criado pelo Timer Time