Soy un novato autodidacta en la programación y estoy tratando de jugar con matrices, DOM y el método setInterval(). Escribí un código que accede a la etiqueta h1 de mi archivo html y muestra cada elemento de una matriz en intervalos de 1000 milisegundos en esa etiqueta. Desafortunadamente, el código se ejecuta correctamente pero muestra "indefinido" al final de la ejecución. Cuando reviso la sección de elementos de Chrome Dev Tools, me doy cuenta de que mi etiqueta h1 sigue parpadeando, lo que supongo que estipula que mi código sigue ejecutándose incluso después de que todos los elementos de la matriz se hayan extinguido. He usado el método de filtro, el método clearTimeout() y sigo obteniendo los mismos resultados. Voy a pegar mi código a continuación. Ojalá obtenga una solución a mi problema. ¡Agradezco los comentarios de antemano!
function myFunction() { const welcome = ["Hello", "My", "Name", "Is", "Philip", "Nice", "To", "Meet", "You!"]; for (let i = 0; i < welcome.length; i++) { function subset() { document.getElementById("heading").innerHTML = welcome[i++]; } setInterval(subset, 1000); return; } } myFunction(); <h1 id="heading"></h1>Puede reorganizar esto para que cada llamada de función establezca la siguiente llamada de función. De esta manera, no necesita preocuparse por realizar un seguimiento de los intervalos para borrar y es más fácil comprender cómo se incrementa i. Si no tiene claro cómo funciona function.bind(), le recomiendo que lea sobre eso, es bastante útil.
function myFunction(i) { const welcome = ["Hello", "My", "Name", "Is", "Philip", "Nice", "To", "Meet", "You!"]; document.getElementById("heading").innerHTML = welcome[i]; if (i < welcome.length - 1) setTimeout(myFunction.bind(null, i + 1), 1000);} miFuncion(0);
Creo que el problema es que usa setinterval que se ejecuta sin cesar cada 1000 a menos que lo reinicie o un error lo detenga; no está vinculado a su ciclo. Esto se acerca bastante a lo que hiciste:
let cnt = 0; const welcome = ["Hello", "My", "Name", "Is", "Philip", "Nice", "To", "Meet", "You!"]; const headingTag = document.getElementById("heading"); function headingLoop() { setTimeout(function() { headingTag.innerHTML = welcome[cnt]; cnt += 1; if (cnt < welcome.length) { headingLoop(); } }, 1000); } headingLoop();Siguiendo con su enfoque setInterval() actual, podría hacer algo como esto.
Este enfoque elimina la necesidad del bucle. Debido a que setInterval() está llamando a la función repetidamente, se encarga de eso.
// set array const welcome = ["Hello", "My", "Name", "Is", "Philip", "Nice", "To", "Meet", "You!"]; // declare index tracking variable and set to 0 let i = 0; // declare your setInterval function and assign to myInterval so you can clear later const myInterval = setInterval(myTimer, 1000); // declare the function that setInterval() will call to output the array to the document function myTimer() { document.getElementById("heading").innerHTML = welcome[i]; i++; // clear interval when you've reached the end of the array if(i > welcome.length - 1) { clearInterval(myInterval); } }