Comportamento da função setTimeOut dentro de um Foreach!!

JavaScript

Front-end

07/11/2018

const title = document.querySelector(''h1'');


function typiWord(element){
    const ArrayWords = element.innerHTML.split('''');
    element.innerHTML = '''';
    ArrayWords.forEach((word, i )=> {
        setTimeout(() => {
            element.innerHTML += word;
        } , 75 * i)

    });
}

typiWord(title);


Considere a função acima, ela pega uma frase e digita-lhe para o usuário assim como neste site: https://www.origamid.com/, minha dúvida é há respeito do comportamento que tem o setTimeout, se colocarmos um número fixo o elemento apenas vai executar de uma vez com ao fim do delay , mas se multiplicarmos pelo número atual da index como acima, o resultador que teremos é um igual tempo de impressão para cada item algo que era inesperado para min, eu esperava que a cada volta do ForEach como a index é cresceste teríamos um aumento também no tempo de impressão, por exemplo: quando estivermos no index 46 a conta que faríamos seria 75 * 46 = 3,450 milisegundos .
Eu conseguir entender como isso acontece se alguem conseguir me explicar ficarei muito grato!!
Pedro Gurgel

Pedro Gurgel

Curtidas 0

Respostas

Angelo Rubin

Angelo Rubin

07/11/2018

O forEach faz uma iteração em cada letra da frase, os milissegundos do setTimeout aumentam e obviamente cada letra aparece mais lentamente após a outra.<br />
75 * 0 => A letra (J) aparece com 0 milissegundos<br /><br />
a => 75 * 1 => A letra (v) aparece com 75 milissegundos<br /><br />
v => 75 * 2 = A letra (v) aparece com 150 milissegundos<br /><br />
(...)<br />
E assim sucessivamente, não tem muito segredo.<br />
Veja o exemplo (no console) - https://codepen.io/angelorubin/pen/VgaENo?editors=0011<br /><br />
GOSTEI 0
POSTAR