Проблема с изменением шрифта циклического текста с использованием HTML/Javascript

#javascript #loops #fonts

Вопрос:

Я пытаюсь сделать так, чтобы один и тот же фрагмент текста исчезал и появлялся на моем сайте, каждый раз меняя шрифты. Я не могу понять почему, но шрифт всегда отображается только как первый шрифт в if/elseif/else блоке. В этом случае это всегда видно 'Chango' .

 var element = document.getElementsByClassName('name')[0];   
const tl = gsap.timeline( {default: {ease: "power1.out"} } );

for (i = 0; i < 10; i  ) {
    if (i % 3 == 0) {
        element.style.fontFamily = 'Chango';
    } else if (i % 3 == 1) {
        element.style.fontFamily = 'Pangolin';
    } else {
        element.style.fontFamily = 'Train One';
    }

    //console.log(i % 3);
    //console.log(element.style.fontFamily);

    tl.to(".name", {y: "0%", duration: 1});
    tl.to(".name", {y: "-100%", duration: 1, delay: 0.5});
    tl.to(".name", {y: "100%", duration: 0});
}
 

Комментарии:

1. Цикл выполняется очень быстро, и только последняя итерация получает возможность отображения. И поскольку 9 % 3 = 0, отображается «чанго».