JavaScript cronometrando Eventos

❮ Anterior Próxima Capítulo ❯

JavaScript pode ser executado em intervalos de tempo.

Isto é chamado de temporização eventos.

cronometrando Eventos

O objeto de janela permite a execução de código em intervalos de tempo especificados.

Estes intervalos de tempo são chamados eventos de temporização.

Os dois principais métodos para usar com JavaScript são:

setTimeout( function, milliseconds )
Executa uma função, depois de esperar 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 os dois métodos do objeto HTML DOM Window.

O setTimeout() Método

window.setTimeout(function, milliseconds);

O window.setTimeout() método pode ser escrita sem o prefixo 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, ea página irá alertar "Olá":

<button onclick="setTimeout(myFunction, 3000)">Try it</button>

<script>
function myFunction() {
alert('Hello');
}
</script>

Tente você mesmo "

Como parar a execução?

O clearTimeout() método pára a execução da função especificada no setTimeout() .

window.clearTimeout( timeoutVariable )

O window.clearTimeout() método pode ser escrita sem o prefixo janela.

O clearTimeout() método usa a variável de voltar de setTimeout() :

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

Se a função não tenha já sido executado, você pode parar a execução chamando o clearTimeout() método:

Exemplo

Mesmo exemplo acima, mas com um botão acrescentado "Stop":

Tente você mesmo "

O setInterval() Método

O setInterval() método repete uma determinada função em cada determinado intervalo de tempo.

window.setInterval(function, milliseconds);

O window.setInterval() método pode ser escrita sem o prefixo janela.

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 "myTimer" uma vez a cada segundo (como um relógio digital).

Exemplo

Mostrar a hora atual:

var myVar = setInterval(myTimer, 1000);

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

Tente você mesmo "

Há 1000 milissegundos em um segundo.

Como parar a execução?

O clearInterval() método evita que as execuções da função especificada no setInterval() método.

window.clearInterval( timerVariable )

O window.clearInterval( ) método pode ser escrita sem o prefixo janela.

O clearInterval() método usa a variável de voltar de setInterval() :

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

Exemplo

Mesmo exemplo acima, mas nós adicionamos um botão "Stop time":

<p id="demo"></p>

<button onclick="clearInterval(myVar)">Stop time</button>

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

Tente você mesmo "