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');
I have this logic to loop over my value passed as argument and print them one letter per second. Why does this not return undefined when the sequenceI becomes 18? But it rather starts the loop again
Why does this not return undefined when the sequenceI becomes 18? But it rather starts the loop again
The statement arr[sequenceI] (when sequenceI is 18) does return undefined.
It just does not manage to get displayed as text on screen because you reset the text to an empty string right away.
Here is what happens when sequenceI is 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;
}