let sequenceI = 0; function sequence(arr){ document.getElementsByTagName('P')[0].innerHTML += arr[sequenceI]; ++sequenceI; setTimeout(() => sequence(arr), 150); if (sequenceI > arr.length) { document.getElementsByTagName('P')[0].innerHTML =""; sequenceI = 0; } } sequence('Software Developer');Tengo esta lógica para recorrer mi valor pasado como argumento e imprimirlos una letra por segundo. ¿Por qué esto no devuelve indefinido cuando la secuencia I se convierte en 18? Pero más bien comienza el ciclo de nuevo.
¿Por qué esto no devuelve indefinido cuando la secuencia I se convierte en 18? Pero más bien comienza el ciclo de nuevo.
La declaración arr[sequenceI] (cuando sequenceI es 18) devuelve undefined . Simplemente no logra mostrarse como texto en la pantalla porque restablece el texto a una cadena vacía de inmediato.
Esto es lo que sucede cuando sequenceI es 18
// 'undefined' is added to the text on screen document.getElementsByTagName('P')[0].innerHTML += arr[sequenceI]; // sequenceI goes from 18 to 19 ++sequenceI; // a callback is scheduled 150ms from now setTimeout(() => sequence(arr), 150); // the check is made and because 19 > 18 it resolves to true if (sequenceI > arr.length) { // the text is reset to an empty string document.getElementsByTagName('P')[0].innerHTML =""; // sequenceI is set to 0, and since there is a call scheduled 150ms from now, // it will just restart the whole thing from the beginning (in 150ms) sequenceI = 0; }