Mi objetivo es ejecutar una función que pueda imprimir el número 1-4; Pero en intervalos de 1 s (y no quiero usar setInterval). Lo he estado intentando y lo que pude hacer fue imprimir todos los elementos en una matriz después de un segundo de retraso. aquí está el código:
const wait = async (number) => { return new Promise(async(resolve)=>{ setTimeout(async()=>{ resolve(); },number); }) } const listElement = document.getElementById("list"); [1,2,3,4].map((num)=>{ const newListItemElement = document.createElement("li"); newListItemElement.innerHTML = num; wait(1000).then(()=>{ console.log(num); listElement.appendChild(newListItemElement); }) }) <html> <body> <h3>list</h3> <ul id="list"> </ul> </body> </html>Lo que quiero que haga es esperar un segundo e imprimir 1, luego esperar un segundo e imprimir 2 y así sucesivamente. El código que agregué en el fragmento hace que todos los números aparezcan juntos a la vez y esto se debe a que la función de mapa continúa incluso si la iteración actual aún no ha terminado.
Puedes hacer esto usando setTimeout
const listElement = document.getElementById("list"); [1, 2, 3, 4].forEach((num) => { setTimeout(() => { const newListItemElement = document.createElement("li"); newListItemElement.innerHTML = num; listElement.appendChild(newListItemElement); }, num * 1000); }) const listElement2 = document.getElementById("list2"); // use this if you are looping over an array of data instead of array of numbers [1, 2, 3, 4].forEach((num, index) => { setTimeout(() => { const newListItemElement = document.createElement("li"); newListItemElement.innerHTML = num; listElement2.appendChild(newListItemElement); }, (index + 1) * 1000); }); <body> <h3>list</h3> <ul id="list"> </ul> <h3>list 2</h3> <ul id="list2"> </ul> </body>