Temporizador (Timing) do JavaScript

A timing function is a function that allows us to execute a function at a specific time.

Using a timing function, you can delay the execution of code to avoid completing the code at the exact moment of triggering the event.

Existem duas funções de temporização no JavaScript:

• setTimeout(function, milliseconds) -executar a função após o número especificado de milissegundos

• setInterval(function, milliseconds) -iguais ao setTimeout(), mas executam a função repetidamente (function)

essessetTimeout()esetInterval()é métodoObjeto janelapode ser escrito sem o prefixo window.

Método setTimeout()

setTimeout()O método é usado para executar uma função ou um bloco de código especificado após um período de tempo.

Sintaxe:

window.setTimeout(function, milliseconds)

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

O segundo parâmetro indica o número de milissegundos antes da execução (1segundo = 1000 milissegundos).

O seguinte exemplo é acionado ao clicar no botão2segundos após será exibida a mensagem de alerta:

<button onclick="setTimeout(myFunc,　2000)">Clique</button>
<script>
function myFunc() {
　　alert("Hello World");
}
</script>

Parar a execução do código

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

Sintaxe:

window.clearTimeout(var)

clearTimeout()usando a variável retornada pelo setTimeout().

　　t = setTimeout();
　　clearTimeout(t);

Se a função ainda não foi executada, pode ser chamadaclearTimeout()Este método é usado para parar a execução.

Como o exemplo acima, mas com botão "Parar":

<button onclick="myFunc()">Clique</button>
<button onclick="myStopFunc()">Parar o alerta</button>
<script>
var t;
function myFunc() {
　　t = setTimeout(function() { alert("Hello world"); },　2000);
}
function myStopFunc() {
　　clearTimeout(t);
}
</script>

Método setInterval()

setInterval()O método chama repetidamente uma função com um atraso fixo entre cada chamada.

Sintaxe:

window.setInterval(function, milliseconds)

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

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

Este exemplo executa uma função chamada 'startTimer' a cada segundo (como um relógio digital):

//Cada1executar startTimer() uma vez por segundo
setInterval(startTimer,　1000);
function startTimer() {
　　var date = new Date();
　　document.getElementById("result").innerHTML = date.toLocaleTimeString();
}

Parar a execução do código

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

Sintaxe:

window.clearInterval(var)

clearInterval()Método usa a variável retornada pelo setInterval()

　　t = setInterval();
　　clearInterval(t);

Como o exemplo acima, mas com botão "Parar":

//Cada1executar startTimer() uma vez por segundo
var t = setInterval(startTimer,　1000);
function startTimer() {
　　var date = new Date();
　　document.getElementById("result").innerHTML = date.toLocaleTimeString();
}
//Cancelar uso de ação repetitiva criada com setInterval()
function stopTimer() {
　　　clearInterval(t);
}

Mais exemplos

Clique no botão "Iniciar contagem" abaixo para iniciar o temporizador. Clique no botão "Parar contagem" para parar a contagem:

Clique no botão "Iniciar progresso" abaixo para iniciar a barra de progresso. Clique no botão "Parar progresso" para parar a barra de progresso: