Tuve que lograr un efecto de escritura que se ejecuta cada 3 segundos. He usado SetInterval para esto. Pero no pude obtener el resultado.
<!DOCTYPE html> <html> <body> <h1>Typewriter</h1> <button>Click me</button> <p id="demo"></p> <script> var i = 0; var txt = 'Lorem ipsum dummy text blabla.'; var speed = 50; function mainTyping(){ if (i < txt.length) { document.getElementById("demo").innerHTML += txt.charAt(i); i++; setTimeout(mainTyping, speed); } } setInterval(mainTyping, 3000) </script> </body> </html>
Así que estoy escribiendo esto para que entiendas cómo funcionan setInterval y setTimeout. Básicamente, cuando llama a setInterval y le pasa una función, lo que hace es después del tiempo especificado, activa esa función y lo que sea que esté en esa función se ejecuta "completamente" y después de que se haya ejecutado "completamente", repite todo el proceso nuevamente. Lo que significa que si está pasando una función typeWriter en setInterval después de 1s, activará la función, y ahora, debido a que en la función de devolución de llamada tiene otro setInterval que ejecuta otra función mainTyping, lo que sucede es tan pronto como se activa typeWriter, el setInerval dentro de la devolución de llamada se ejecuta después de que el tiempo especificado haya pasado la función mainTyping y después de que la función de escritura principal se haya ejecutado por completo, el controlador luego va a la función typeWriter y este proceso se repite una y otra vez dentro del intervalo de tiempo especificado. Espero que entiendas lo que acabo de escribir. Lo que esto reduce es que setInerval ejecuta la función a la que se le pasa por completo y, una vez que se ha ejecutado por completo, espera el tiempo que especificó y vuelve a ejecutar la función. Debería aprender sobre setInterval y setTimeout desde aquí . Obviamente, puede lograr el resultado usando setInterval y usando setTimeout; sin embargo, setTimeout es mejor, puede leer por qué en el artículo que mencioné.
PD: Además, tenga en cuenta que cuando hace clic en el botón haga clic en mí, "L" se escribe bastante rápido que el resto de las letras porque cuando la función typeWriter se ejecuta por primera vez, hay un setTimeout de segundos de "velocidad" en la función mainTyping, que es de 50 ms. y anidada en ella está la función typeWriter a la que llamamos después de cada 1 s, por lo que el resto de las palabras se escriben después de que haya pasado exactamente 1 s.
var i = 0; var txt = 'Lorem ipsum dummy text blabla.'; var speed = 50; let button = document.querySelector("button"); function mainTyping(){ if (i < txt.length) { document.getElementById("demo").innerHTML += txt.charAt(i); i++; } } function typeWriter() { setTimeout((mainTyping), setTimeout(typeWriter, 1000), speed); } button.addEventListener("click", typeWriter);
<!DOCTYPE html> <html> <body> <h1>Typewriter</h1> <button>Click me</button> <p id="demo"></p> </body> </html>