Estoy tratando de imprimir una letra tras otra, pero este código solo espera 100 ms y luego imprime el valor sin pausas. ¿Alguna idea de por qué sucede esto y cómo solucionarlo? Código:
for (let i = 0; i < welcText.length; i++) { setTimeout(()=>{ welcome.innerText += welcText[i]; },100); }Tenga en cuenta que setTimeout en realidad no retrasa la ejecución del código que viene después; simplemente programa que algo suceda en el futuro. Entonces todas las letras se agregan al mismo tiempo, después de 100 milisegundos.
La forma más sencilla de solucionarlo es hacer que cada tiempo de espera subsiguiente espere un poco más, multiplicando el retraso por el índice de la letra ( i * 100 ):
const welcome = document.getElementById('welcome'); const welcText = 'Welcome!'; for (let i = 0; i < welcText.length; i++) { setTimeout(() => { welcome.innerText += welcText[i]; }, i * 100); } <div id="welcome"></div>La siguiente función divtxt() devuelve una Promise . Puede usarlo para enviar un txt a un div con una id dada y dejar que cada letra aparezca en intervalos de ms . Y: puede construir una cadena de cualquier número de acciones de seguimiento con él:
function divtxt(id, txt, ms, wait = 0) { const div = document.getElementById(id); return new Promise((res, rej) => { setTimeout(() => { // optional initial timeout, when wait>0 div.textContent = ""; const a = txt.split(""), iv = setInterval(() => { if (a.length) div.textContent += a.shift(); else { clearInterval(iv); res(txt); } }, ms); }, wait); }); } divtxt("welcome", "Hello world, this is my way of doing it! 🤩", 100) .then(prevText => (console.log(prevText + ' is done.'), divtxt("descr", "You can also chain this function with any number of consecutive actions." +" Now: wait for 2 seconds ...", 100))) .then(() => divtxt("welcome", "This promised-based approach REALLY lets you do it!! 👍🏻", 50, 2000)) .then(() => (console.log("ready?"),"Yes! I am REALLY DONE now! 😁")) .then(console.log) #welcome { font-weight: 900 } <div id="welcome"></div> <div id="descr"></div>Puede hacerlo usando setInterval en su lugar, y usando un iterador para llamar al siguiente carácter de la cadena cada vez. Esto es un poco más complicado, pero tiene la ventaja de no tener varios programadores ejecutándose si la cadena es demasiado larga. Vea el ejemplo de trabajo a continuación.
const welcome = document.getElementById('welcome'); const welcomeText = 'Welcome!'; // returns a function that returns the next char in the string everytime its called function createIterator(string) { let currentIndex = 0; return function() { return string[currentIndex++]; } } // initializes the iterator with the text let welcomeIterator = createIterator(welcomeText); let welcomeInterval = setInterval(function() { let nextChar = welcomeIterator(); // if we finish the string we clear the interval if (!nextChar) { return clearInterval(welcomeInterval); } // if the char exists, we append it to the div welcome.innerText += nextChar; }, 100); <div id="welcome"></div>