Eventos de sincronización de JavaScript

Tabla de contenido

Mostrar tabla de contenidos

JavaScript se puede ejecutar en intervalos de tiempo.

A esto se le llama cronometrar eventos.

Eventos de sincronización

El objeto ventana permite la ejecución de código en intervalos de tiempo específicos.

Estos intervalos de tiempo se denominan eventos de cronometraje.

Los dos métodos clave para usar con JavaScript son:

setTimeout(función, milisegundos)
Ejecuta una función, después de esperar un número específico de milisegundos.
setInterval(función, milisegundos)
Igual que setTimeout(), pero repite la ejecución de la función de forma continua.

setTimeout() y setInterval() son ambos métodos del objeto HTML DOM Window.

El método setTimeout()

window.setTimeout(function, milliseconds);

El método window.setTimeout() se puede escribir sin el prefijo de ventana.

El primer parámetro es una función a ejecutar.

El segundo parámetro indica el número de milisegundos antes de la ejecución.

Ejemplo

Haga clic en un botón. Espere 3 segundos y la página alertará "Hola":

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

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

Pruébelo usted mismo →

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

¿Cómo detener la ejecución?

El método clearTimeout() detiene la ejecución de la función especificado en setTimeout().

window.clearTimeout(timeoutVariable)

El método window.clearTimeout() se puede escribir sin el prefijo de ventana.

El método clearTimeout() utiliza la variable devuelto desde setTimeout():

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

Si la función aún no se ha ejecutado, puede detener la ejecución llamando a clearTimeout() método:

Ejemplo

El mismo ejemplo que el anterior, pero con un botón "Detener" agregado:

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

Pruébelo usted mismo →

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

El método setInterval()

El método setInterval() repite una función determinada en cada intervalo de tiempo.

window.setInterval(function, milliseconds);

El método window.setInterval() se puede escribir sin el prefijo de ventana.

El primer parámetro es la función a ejecutar.

El segundo parámetro indica la duración del intervalo de tiempo entre cada ejecución.

Este ejemplo ejecuta una función llamada "myTimer" una vez por segundo (como un reloj digital mirar).

Ejemplo

Mostrar la hora actual:

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

Pruébelo usted mismo →

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

Hay 1000 milisegundos en un segundo.

¿Cómo detener la ejecución?

El método clearInterval() detiene las ejecuciones de la función. especificado en el método setInterval().

window.clearInterval(timerVariable)

El método window.clearInterval() se puede escribir sin el prefijo de ventana.

El método clearInterval() utiliza la variable devuelta por setInterval():

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

Ejemplo

El mismo ejemplo que el anterior, pero hemos agregado un botón de "Tiempo 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>

Pruébelo usted mismo →

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

Más ejemplos

Otro momento simple

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

Un reloj creado con un evento de sincronización.

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