Cómo implementar una función de pausa en JavaScript: Técnicas de retraso asíncrono explicadas

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introducción

JavaScript es un lenguaje de programación ampliamente usado tanto en el frontend como en el backend. Sin embargo, a diferencia de muchos otros lenguajes, no incluye una función sleep incorporada como característica estándar.

Una función sleep se utiliza típicamente para pausar la ejecución durante un período de tiempo especificado. Por ejemplo, puede ser útil al insertar breves retardos después de obtener datos o al controlar animaciones de la interfaz de usuario (UI).

No obstante, dado que JavaScript es un lenguaje de un solo hilo diseñado para manejar el procesamiento asíncrono de manera eficiente, una función sleep bloqueante sincrónica no existe por diseño.

Propósito de este artículo

Este artículo explica métodos concretos para implementar un comportamiento similar a sleep en JavaScript. Partiendo de ejemplos de código básicos y avanzando hacia implementaciones más sofisticadas, está escrito de forma que incluso los principiantes puedan comprenderlo, al mismo tiempo que brinda conocimientos prácticos para su uso en entornos reales.

Además, se explica la relación entre el procesamiento asíncrono y el bucle de eventos, junto con advertencias importantes, para ayudar a los lectores a obtener una comprensión sólida de cómo funciona JavaScript internamente.

Público objetivo

Este artículo está dirigido a los siguientes lectores:

• Principiantes en JavaScript que entienden la sintaxis básica pero aún no se sienten cómodos con el procesamiento asíncrono.
• Desarrolladores que se preguntan por qué JavaScript no tiene una función sleep incorporada y desean aprender implementaciones alternativas.
• Aquellos que necesitan lógica de retardo para solicitudes de API o control de animaciones en aplicaciones del mundo real.

Qué sigue

En el próximo artículo, titulado “Implementación básica de una función sleep en JavaScript”, nos enfocaremos en el enfoque más sencillo usando la función setTimeout.

Ese artículo incluirá ejemplos de código concretos y también presentará implementaciones más avanzadas usando Promise y async/await.

2. Implementación básica de una función sleep en JavaScript

JavaScript no proporciona una función sleep incorporada, pero se puede lograr un comportamiento similar mediante el procesamiento asíncrono. En esta sección, presentamos dos enfoques fundamentales de implementación.

2-1. Ejecución retardada usando setTimeout

En JavaScript, la función setTimeout permite ejecutar código después de un retardo especificado. Aprovechando esta función, puedes implementar un mecanismo simple similar a sleep.

Sintaxis básica

setTimeout(callback, milliseconds);

Ejemplo

El siguiente código muestra un mensaje en la consola después de un segundo.

console.log("Start");

setTimeout(() => {
  console.log("Executed after 1 second");
}, 1000);

console.log("End");

Resultado de la ejecución

Start  
End  
Executed after 1 second

2-2. Implementación usando Promise y async/await

Para facilitar el control de la lógica asíncrona, puedes implementar una función sleep usando Promise y async/await.

Implementando una función sleep con Promise

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

console.log("Start");

sleep(1000).then(() => {
  console.log("Executed after 1 second");
});

console.log("End");

2-3. Una implementación más concisa usando async/await

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function demo() {
  console.log("Start");
  await sleep(1000); // wait for 1 second
  console.log("Executed after 1 second");
  console.log("End");
}

demo();

2-4. Resumen

En esta sección, presentamos métodos básicos para implementar una función sleep en JavaScript.

• setTimeout: Simple pero requiere un control asíncrono cuidadoso.
• Promise y async/await: Más legible y adecuado para aplicaciones prácticas.

3. Casos de uso prácticos

En esta sección, presentamos casos de uso concretos que aplican la funcionalidad similar a sleep en JavaScript.

3-1. Establecer tiempo de espera dentro de bucles

Ejemplo 1: Controlando los intervalos de obtención de datos

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function fetchData() {
  const urls = [
    "https://api.example.com/data1",
    "https://api.example.com/data2",
    "https://api.example.com/data3"
  ];

  for (let url of urls) {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);

    // wait for 1 second
    await sleep(1000);
  }
}

fetchData();

3-2. Control retrasado de animaciones de UI

Ejemplo 2: Visualización retrasada en una presentación

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function startSlideshow(images) {
  for (let img of images) {
    console.log(`Displaying: ${img}`); // using console output as a placeholder
    await sleep(2000); // wait for 2 seconds
  }
}

const imageList = ["image1.jpg", "image2.jpg", "image3.jpg"];
startSlideshow(imageList);

3-3. Ajustando los intervalos de solicitudes API

Ejemplo 3: Sondeo de API en intervalos fijos

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function pollAPI() {
  const endpoint = "https://api.example.com/status";

  while (true) {
    const response = await fetch(endpoint);
    const data = await response.json();
    console.log(`Fetched data: ${data.status}`);

    // Exit the loop based on a condition
    if (data.status === "complete") {
      console.log("Process completed");
      break;
    }

    // wait for 3 seconds
    await sleep(3000);
  }
}

pollAPI();

3-4. Resumen

• Esperar dentro de bucles: Útil para controlar los intervalos de recuperación de datos y el orden de ejecución.
• Retrasos en animaciones de UI: Mejora la experiencia del usuario al gestionar los efectos de temporización visual.
• Control de intervalos de solicitudes API: Permite la monitorización dinámica de datos mediante sondeo.

4. Buenas prácticas y consideraciones importantes

Has aprendido cómo implementar y aplicar funcionalidad similar a sleep en JavaScript, pero existen varias consideraciones importantes al usarla en aplicaciones reales. Esta sección presenta buenas prácticas relacionadas con el rendimiento y el manejo de errores.

4-1. Entendiendo el procesamiento asíncrono y el bucle de eventos

JavaScript se ejecuta en un solo hilo y gestiona operaciones asíncronas mediante el bucle de eventos. Sin comprender este mecanismo, el código puede no comportarse como se espera.

Cómo funciona el bucle de eventos

El bucle de eventos de JavaScript procesa tareas en el siguiente orden:

1. Pila de llamadas: Las operaciones síncronas se apilan y se ejecutan en orden.
2. Cola de tareas: Los callbacks asíncronos (como setTimeout ) se añaden aquí y se ejecutan una vez que la pila de llamadas está vacía.

Ejemplo: Observando el comportamiento del bucle de eventos

console.log("Start");

setTimeout(() => {
  console.log("Timer finished");
}, 0);

console.log("End");

Resultado de la ejecución

Start  
End  
Timer finished

4-2. Consideraciones de rendimiento

El uso excesivo de retrasos similares a sleep puede afectar negativamente el rendimiento de la aplicación. Ten en cuenta los siguientes puntos.

Mal ejemplo: Evita operaciones de bloqueo prolongadas

const delay = Date.now() + 5000; // wait for 5 seconds
while (Date.now() < delay) {
  // busy waiting
}

Buen ejemplo: Esperar con procesamiento asíncrono

async function example() {
  console.log("Start");
  await sleep(5000); // wait for 5 seconds
  console.log("End");
}
example();

4-3. Implementación del manejo de errores

Ejemplo: Manejo de errores en solicitudes API

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function fetchDataWithRetry(url, retries = 3, delay = 1000) {
  for (let i = 0; i < retries; i++) {
    try {
      const response = await fetch(url);
      if (!response.ok) throw new Error(`Error HTTP: ${response.status}`);
      const data = await response.json();
      console.log(data);
      return; // salir en caso de éxito
    } catch (error) {
      console.error(`Intento ${i + 1}: Ocurrió un error - ${error.message}`);
      await sleep(delay); // esperar antes de reintentar
    }
  }
  console.error("Todas las tentativas de reintento fallaron");
}

fetchDataWithRetry("https://api.example.com/data");

4-4. Summary

• Understanding the event loop: Essential knowledge for predictable asynchronous behavior.
• Performance optimization: Avoid blocking operations to maintain application responsiveness.
• Error handling: Build robust code using retries and logging.
• Environment differences: Understand browser and Node.js characteristics to choose the best approach.

5. Frequently Asked Questions (FAQ)

In this section, we address common questions readers often have about implementing a sleep function in JavaScript.

5-1. Is a “sleep” Function Really Necessary in JavaScript?

Question:
JavaScript is designed to handle asynchronous processing efficiently. Is a sleep function really necessary?

Answer:
A sleep-like function can be very useful in specific use cases, such as:

• Adjusting API request intervals: Executing consecutive requests while reducing server load.
• Controlling UI animations: Implementing slideshows or step-by-step visual effects.
• Retry logic: Reattempting operations at fixed intervals after communication errors.

5-2. Why Doesn’t JavaScript Have a Built-in sleep Function?

Question:
Many other programming languages provide a built-in sleep function. Why doesn’t JavaScript?

Answer:
JavaScript is designed around asynchronous processing and uses an event loop to manage execution. This design ensures UI responsiveness and efficient task handling, making synchronous blocking functions like sleep undesirable by default.

5-3. What Is the Difference Between Synchronous and Asynchronous Processing?

Question:
I don’t fully understand the difference between synchronous and asynchronous processing.

Answer:
The difference can be illustrated with the following examples.

Synchronous Example:

console.log("Inicio");
for (let i = 0; i < 1e9; i++) {} // operación que consume tiempo
console.log("Fin");

Asynchronous Example:

console.log("Inicio");
setTimeout(() => {
  console.log("Fin");
}, 1000);
console.log("Procesando");

5-4. What Should I Be Careful About When Using a sleep Function?

Question:
Are there any important points to keep in mind when using a sleep function?

Answer:

1. Performance impact: Long delays can slow down overall execution.
2. Avoid UI freezing: Always use asynchronous approaches instead of blocking loops.
3. Error handling: Combine sleep logic with retry mechanisms for stability.

5-5. Summary

In this section, we addressed common questions about the sleep function in JavaScript.

• JavaScript does not include a built-in sleep function, but equivalent behavior can be implemented using asynchronous techniques.
• Practical answers to common questions help deepen real-world understanding.

6. Conclusion

6-1. Article Recap

1. The Need for a “sleep” Function in JavaScript

Although JavaScript does not provide a built-in sleep function, we explained how equivalent behavior can be achieved using asynchronous processing.

2. Implementation Methods

• setTimeout: The most basic approach for delayed execution.
• Promise and async/await: Easier control over asynchronous flow and improved readability.

3. Best Practices and Considerations

• Comprender el bucle de eventos: Explicando cómo funciona la ejecución asíncrona internamente.
• Conciencia de rendimiento: Evitar operaciones bloqueantes y escribir código eficiente.
• Manejo de errores: Diseñar lógica robusta usando reintentos y registro de logs.

6-2. Casos de uso futuros

Una función similar a sleep en JavaScript es útil en muchos escenarios, desde el control simple de temporización hasta flujos de trabajo asíncronos avanzados.

Aplicaciones prácticas en proyectos:

• Interfaces de usuario: Controlar animaciones de botones y formularios.
• Polling de API: Monitorear periódicamente los datos más recientes.
• Procesamiento por lotes: Ejecutar operaciones de gran volumen de datos en intervalos controlados para gestionar la carga del sistema.

6-3. Reflexiones finales

Al seguir este artículo y practicar con código real, puedes profundizar tu comprensión del comportamiento asíncrono de JavaScript. Aplicar los ejemplos y las mejores prácticas discutidas aquí te ayudará a crear aplicaciones más flexibles, fiables y prácticas.