「shuffle-text.js」使って、数秒のインターバルを置きループ再生したい

Question

実現したいこと

「shuffle-text」というJSをつかって、テキストのアニメーションを作成し
5秒程度のインターバルをおいて、ループ再生し続けたい。
https://ics.media/entry/15498/

前提

WEBサイトを制作中で、テキストアニメーションとして
「shuffle-text」というJSをつかって、テキストがシャッフルしている効果を取り入れたく
さらに、5秒程度のインターバルを置いて、再生がループされるという仕様にしたいです。

■このJSが紹介されている記事
https://ics.media/entry/15498/

■デモページ
https://ics-ikeda.github.io/shuffle-text/examples/plain/

■Github
https://github.com/ics-ikeda/shuffle-text

該当のソースコード

   window.addEventListener('load', init);
    function init() {
      var effectList = [];
      var elementList = document.querySelectorAll('.my-effect');

      for (var i = 0; i < elementList.length; i++) {

        var element = elementList[i];
        element.dataset.index = i;

        // インスタンスを取得する
        effectList[i] = new ShuffleText(element);

        // マウスオーバー時に再生する
        element.addEventListener('mouseenter', function () {
          effectList[+this.dataset.index].start();
        });

        // マウスアウト時に再生する
        element.addEventListener('mouseleave', function () {
          effectList[+this.dataset.index].start();
        });

        // 初回を再生する
        effectList[i].start();
      }
    }

Answer 1

setTimeout()を使ってはいかがですか？

Comments

[kliz]

ありがとうございます！

Answer 2

知人に聞いて解決いたしました。

window.addEventListener('load', init);
    function init() {

          const effectList = [];
          const elementList = document.querySelectorAll(".shuffle-text");

          for (let i = 0; i < elementList.length; i++) {
            const element = elementList[i];
            element.dataset.index = i;
            effectList[i] = new ShuffleText(element);
          }

          for (let i = 0; i < effectList.length; i++) {
            effectList[i].start();
            const during = effectList[i]._element.dataset.timeDuring
              ? effectList[i]._element.dataset.timeDuring
              : 5000;
            setInterval(() => {
              effectList[i].start();
            }, during);
          }


    }