Temporizadores

Disponible

4.1 Función setTimeout

Los temporizadores en JavaScript te permiten ejecutar ciertas acciones después de un intervalo de tiempo específico. Los dos métodos principales para trabajar con temporizadores son setTimeout() y setInterval(). Se utilizan para ejecutar código con retraso o en intervalos regulares.

El método setTimeout() permite ejecutar una función una sola vez después de una cantidad específica de milisegundos. Esto es útil para la ejecución diferida de código.

Sintaxis:

const timeoutID = setTimeout(callback, delay, ...args);

Dónde:

  • callback: función que será ejecutada
  • delay: retraso en milisegundos antes de ejecutar la función
  • args: argumentos adicionales que serán pasados a la función callback

Ejemplo de uso de setTimeout():

JavaScript
// Función que se ejecutará después de 2 segundos
function greet() {
  console.log('Hello, world!');
}

// Configuración del temporizador
const timeoutID = setTimeout(greet, 2000);

4.2 Cancelación del temporizador setTimeout

Si necesitas cancelar la ejecución de una función programada con setTimeout(), puedes usar el método clearTimeout():

JavaScript
// Función que se ejecutará después de 2 segundos
function greet() {
  console.log('Hello, world!');
}

// Configuración del temporizador
const timeoutID = setTimeout(greet, 2000);

// Cancelación del temporizador
clearTimeout(timeoutID);

Ejemplo con argumentos adicionales:

JavaScript
// Función que se ejecutará después de 2 segundos con argumentos
function greet(name) {
  console.log(`Hello, ${name}!`);
}

// Configuración del temporizador con argumento
const timeoutID = setTimeout(greet, 2000, 'Alice');

4.3 Función setInterval

El método setInterval() permite ejecutar una función repetidamente a intervalos especificados. Esto es útil para la ejecución periódica de código.

Sintaxis:

const intervalID = setInterval(callback, delay, ...args);

Dónde:

  • callback: función que se ejecutará
  • delay: intervalo en milisegundos entre llamadas a la función
  • args: argumentos adicionales que serán pasados a la función callback

Ejemplo de uso de setInterval:

JavaScript
// Función que se ejecutará cada 2 segundos
function greet() {
  console.log('Hello, world!');
}

// Configuración del intervalo
const intervalID = setInterval(greet, 2000);

4.4 Cancelación del intervalo setInterval

Si necesitas detener la ejecución repetida de una función, puedes usar el método clearInterval().

JavaScript
// Función que se ejecutará cada 2 segundos
function greet() {
  console.log('Hello, world!');
}

// Configuración del intervalo
const intervalID = setInterval(greet, 2000);

// Cancelación del intervalo después de 10 segundos
setTimeout(() => {
  clearInterval(intervalID);
  console.log('Interval cleared');
}, 10000);

Ejemplo con argumentos adicionales:

JavaScript
// Función que se ejecutará cada 2 segundos con argumentos
function greet(name) {
  console.log(`Hello, ${name}!`);
}

// Configuración del intervalo con argumento
const intervalID = setInterval(greet, 2000, 'Alice');

4.5 Ejemplos de uso práctico

Ejemplo 1: Actualización automática de la hora

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Auto-update Time</title>
  </head>
  <body>
    <h1>Current Time</h1>
    <div id="time"></div>

    <script>
      function updateTime() {
        const now = new Date();
        const timeString = now.toLocaleTimeString();
        document.getElementById('time').textContent = timeString;
      }

      // Actualización de la hora cada segundo
      updateTime();
      setInterval(updateTime, 1000);
    </script>
  </body>
</html>

Ejemplo 2: Petición periódica de datos

JavaScript
// Función para emular una petición de datos
function fetchData() {
  console.log('Fetching data...');
  // Aquí puedes realizar una solicitud real al servidor
}

// Realización de la petición de datos cada 10 segundos
const intervalID = setInterval(fetchData, 10000);

// Detener solicitudes después de 1 minuto
setTimeout(() => {
  clearInterval(intervalID);
  console.log('Stopped fetching data');
}, 60000);
1
Tarea
Frontend SELF ES,  nivel 37lección 3
Bloqueada
Mensaje retrasado
Mensaje retrasado
1
Tarea
Frontend SELF ES,  nivel 37lección 3
Bloqueada
Actualización de la hora
Actualización de la hora
Comentarios
  • Populares
  • Nuevas
  • Antiguas
Debes iniciar sesión para dejar un comentario
Esta página aún no tiene comentarios