Tengo 2 elementos div separados y tengo una función que define cada elemento y se supone que solo actúa sobre el elemento. así que cuando llamo a typeField(name,element1) debe escribir solo en element1 y de manera similar, luego llamo a typeField(address,element2) debe escribir solo en element2 .. pero actualmente, si verifica mi implementación de codepen, está mezclando los caracteres y estoy No estoy seguro de por qué.
Además, después de esto, necesito encontrar una forma de obtener el nombre para escribir primero y luego, una vez hecho esto, necesito comenzar a escribir la dirección. Mi suposición es que necesito prometer las funciones y luego llamarlas como async/await. ¿Ese es el enfoque correcto? o estoy pensando demasiado en esto?
entonces mis 2 preguntas son
Cualquier ayuda para resolver esto sería apreciada.
Este es el enlace a mi Codepen
https://codepen.io/alimbolar/pen/Rwjoqbm?editors=1111
const typewriter1 = document.getElementById('typewriter1'); const typewriter2 = document.getElementById('typewriter2'); const name = 'Alim Bolar'; const address = "Some part of the world"; const currentLocation = "Bali, Indonesia"; const profile = "Frontend Development, Backend Development, WordPress Development" let content = ""; let i = 0; function typeField(x, element) { if (i < x.length) { alphabet = x.charAt(i); content = content + alphabet; element.innerHTML = content; i++; setTimeout(function() { typeField(x, element) }, 500); } } typeField(name, typewriter1); typeField(address, typewriter2); <header> <div>NAME : <span id="typewriter1"></span></div> <div>ADDRESS : <span id="typewriter2"></span></div> </header>Necesitas
i o el content sean globales, porque entonces será compartido por todas las llamadas de typeFieldtypeField se asigne a una Promesa persistente fuera de la cual se encadenan más llamadas fuera de Considere await una Promesa dentro de un ciclo, se verá mucho más limpio que la recursividad.
const typewriter1 = document.getElementById('typewriter1'); const typewriter2 = document.getElementById('typewriter2'); const name = 'Alim Bolar'; const address = "Some part of the world"; const currentLocation = "Bali, Indonesia"; const profile = "Frontend Development, Backend Development, WordPress Development" let prom = Promise.resolve(); const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms)); function typeField(textToInsert, element) { prom = prom.then(async () => { for (const char of textToInsert) { element.textContent += char; await delay(500); } }); } typeField(name, typewriter1); typeField(address, typewriter2); <header> <div>NAME : <span id="typewriter1"></span></div> <div>ADDRESS : <span id="typewriter2"></span></div> </header>