Eventos de tempo JavaScript

Índice

Mostrar índice

JavaScript pode ser executado em intervalos de tempo.

Isso é chamado de eventos de cronometragem.

Eventos de tempo

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

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

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

setTimeout(função, milissegundos)
Executa uma função após aguardar um número especificado de milissegundos.
setInterval(função, milissegundos)
O mesmo que setTimeout(), mas repete a execução da função continuamente.

O setTimeout() e setInterval() são ambos métodos do objeto HTML DOM Window.

O método setTimeout()

window.setTimeout(function, milliseconds);

O método window.setTimeout() pode ser escrito sem o prefixo de 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>

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Timing</h2>

<p>Click "Try it". Wait 3 seconds, and the page will alert "Hello".</p>

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

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

</body>
</html>

Como parar a execução?

O método clearTimeout() interrompe a execução da função especificado em setTimeout().

window.clearTimeout(timeoutVariable)

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

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

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

Se a função ainda não tiver sido executada, você pode interromper a execução chamando 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>

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Timing</h2>

<p>Click "Try it". Wait 3 seconds. The page will alert "Hello".</p>
<p>Click "Stop" to prevent the first function to execute.</p>
<p>(You must click "Stop" before the 3 seconds are up.)</p>

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

<button onclick="clearTimeout(myVar)">Stop it</button>

<script>
function myFunction() {
  alert("Hello");
}
</script>
</body>
</html>

O método setInterval()

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

window.setInterval(function, milliseconds);

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

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 assistir).

Exemplo

Exibir a hora atual:

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Timing</h2>

<p>A script on this page starts this clock:</p>

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

<script>
setInterval(myTimer, 1000);

function myTimer() {
  const d = new Date();
  document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>

</body>
</html>

Existem 1000 milissegundos em um segundo.

Como parar a execução?

O método clearInterval() interrompe as execuções da função especificado no método setInterval().

window.clearInterval(timerVariable)

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

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

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

Exemplo

O mesmo exemplo acima, mas adicionamos um botão "Hora de parada":

<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>

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Timing</h2>

<p>A script on this page starts this clock:</p>

<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>

</body>
</html>

Mais exemplos

Outro momento simples

<!DOCTYPE html>
<html>
<body>

<h2>JavaSript setTimeout()</h2>

<p id="demo">I will display when two, four, and six seconds have passed.</p>

<script>
setTimeout(myTimeout1, 2000) 
setTimeout(myTimeout2, 4000) 
setTimeout(myTimeout3, 6000) 

function myTimeout1() {
  document.getElementById("demo").innerHTML = "2 seconds";
}
function myTimeout2() {
  document.getElementById("demo").innerHTML = "4 seconds";
}
function myTimeout3() {
  document.getElementById("demo").innerHTML = "6 seconds";
}
</script>

</body>
</html>

Um relógio criado com um evento de cronometragem

<!DOCTYPE html>
<html>

<body onload="startTime()">

<h2>JavaScript Clock</h2>

<div id="txt"></div>

<script>
function startTime() {
  const today = new Date();
  let h = today.getHours();
  let m = today.getMinutes();
  let s = today.getSeconds();
  m = checkTime(m);
  s = checkTime(s);
  document.getElementById('txt').innerHTML =  h + ":" + m + ":" + s;
  setTimeout(startTime, 1000);
}

function checkTime(i) {
  if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
  return i;
}
</script>

</body>
</html>