Comportamento da fun��o setTimeOut dentro de um Foreach!!

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

Curtir t�pico + 0

Responder

Posts

27/01/2019

Angelo Rubin

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. 
75 * 0 => A letra (J) aparece com 0 milissegundos 
a => 75 * 1 => A letra (v) aparece com 75 milissegundos 
v => 75 * 2 = A letra (v) aparece com 150 milissegundos 
(...) 
E assim sucessivamente, n�o tem muito segredo. 
Veja o exemplo (no console) - https://codepen.io/angelorubin/pen/VgaENo?editors=0011

Responder

Gostei + 0