Tiempo y asincronía

Hacer algo más tarde, cada cierto tiempo o cuando lleguen unos datos, sin bloquear la página.

setTimeout(): Ejecuta una función una vez, pasados unos milisegundos (1000 ms = 1 s).

async y await: Dentro de una función async, await espera a que llegue el resultado de una promesa.

fetch(): Pide datos a una dirección (una API, un fichero JSON) y devuelve una promesa.

  • Hacer algo más tarde, cada cierto tiempo o cuando lleguen unos datos, sin bloquear la página.
  • Cada entrada lleva una explicación corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para cambiarlos y ejecutarlos: lo que escriben con console.log() sale en la consola.
  • Esencial. Ejecuta una función una vez, pasados unos milisegundos (1000 ms = 1 s).
  • Repite una función cada cierto tiempo hasta que se para con clearInterval.
  • Un valor que llegará más tarde (o un error). then recibe el resultado y catch, el error. Casi siempre las usarás a través de fetch y await.

Introducción

Hacer algo más tarde, cada cierto tiempo o cuando lleguen unos datos, sin bloquear la página.

Cada entrada lleva una explicación corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para cambiarlos y ejecutarlos: lo que escriben con console.log() sale en la consola.

setTimeout()

Esencial. Ejecuta una función una vez, pasados unos milisegundos (1000 ms = 1 s).

setInterval() y clearInterval()

Repite una función cada cierto tiempo hasta que se para con clearInterval.

Promise

Un valor que llegará más tarde (o un error). then recibe el resultado y catch, el error. Casi siempre las usarás a través de fetch y await.

async y await

Esencial. Dentro de una función async, await espera a que llegue el resultado de una promesa. El código se lee de arriba abajo, como si fuera inmediato.

fetch()

Esencial. Pide datos a una dirección (una API, un fichero JSON) y devuelve una promesa. Con response.json() se leen como objeto. Comprueba response.ok y captura los errores.

📌 Nota. En el ejemplo los datos van dentro de la propia dirección (data:) para que funcione sin conexión; en tu web pondrás la dirección de la API.

requestAnimationFrame()

Ejecuta una función justo antes de que el navegador dibuje el siguiente fotograma (unas 60 veces por segundo): para animar con JavaScript.

Referencia de JavaScript
11

Tiempo y asincronía

Hacer algo más tarde, cada cierto tiempo o cuando lleguen unos datos, sin bloquear la página.

Código del tema: console.log("Ahora");

📘 Teoría

Introducción

Hacer algo más tarde, cada cierto tiempo o cuando lleguen unos datos, sin bloquear la página.

Cada entrada lleva una explicación corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para cambiarlos y ejecutarlos: lo que escriben con console.log() sale en la consola.

setTimeout()

Esencial. Ejecuta una función una vez, pasados unos milisegundos (1000 ms = 1 s).

setInterval() y clearInterval()

Repite una función cada cierto tiempo hasta que se para con clearInterval.

Promise

Un valor que llegará más tarde (o un error). then recibe el resultado y catch, el error. Casi siempre las usarás a través de fetch y await.

async y await

Esencial. Dentro de una función async, await espera a que llegue el resultado de una promesa. El código se lee de arriba abajo, como si fuera inmediato.

fetch()

Esencial. Pide datos a una dirección (una API, un fichero JSON) y devuelve una promesa. Con response.json() se leen como objeto. Comprueba response.ok y captura los errores.

📌 Nota. En el ejemplo los datos van dentro de la propia dirección (data:) para que funcione sin conexión; en tu web pondrás la dirección de la API.

requestAnimationFrame()

Ejecuta una función justo antes de que el navegador dibuje el siguiente fotograma (unas 60 veces por segundo): para animar con JavaScript.

🕹️ Practica

Referencia interactiva Ejemplos editables: Tiempo y asincronía Abrir en pantalla completa

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros. culTest

La hice en febrero de 2026 para facilitar el aprendizaje de mis alumnos. La idea es aprender desarrollo web practicando y que el proyecto siga creciendo con nuevos temas, tests y retos.

Está inspirada en MDN, W3Schools, CodePen, Manz y muchos otros sitios de documentación sobre desarrollo web. Quería combinar teoría útil, ejemplos ejecutables, retos y el sistema de tests que ya tenía en culTest. culTest

Si te gustó, si no te gustó o si quieres escribirme, puedes hacerlo en cristianeslava@gmail.com