使用Vanilla JS自动运行多次循环

Question

我已经成功地将实现我的目标的代码片段整理在一起。 但是，我想从更高级的JS初学者那里获得一些建议，以更好地实现自己的目标。

首先，我想介绍一下我的问题。 我的网站上有一段文字，其中一部分旨在经常更改。 为此，我要遍历短语循环。 为了连续运行此循环，我首先调用该循环，然后使用setInterval再次调用该循环，定时将在初始循环结束时开始。 这是我得到的代码，即使它不是质量代码也可以使用：

function loop(){

for (let i = 0; i < header_phrases.length; i++){
    (function (i) {
        setTimeout(function(){
          header_txt.textContent =  header_phrases[i];
        }, 3000 * i);
    })(i);
};
}

loop();
setInterval(loop, 21000);

有没有更好的方法可以同时针对性能和质量使用此代码？ 我需要使用异步吗？ 如果是这样，我可以看到任何资料以了解更多信息？ 谢谢！

Answer 1

您可以使用递归来实现相同的逻辑。

function recursify(phrases, index = 0) {
    header_txt.textContent = phrases[index];
    setTimeout(function () {
        recursify(phrases, index < phrases.length - 1 ? index + 1 : 0);
    }, 300)
}

recursify(header_phrases);

函数“ recursify”将在300毫秒后调用自己，但是每次调用此函数时，index的值都会不同。

Answer 2

如果我正确理解您的要求，则希望从值数组中填充一个元素。

一种简单的方法是：

doLoop();
function doLoop() {
    var phraseNo=0;
    setTimeout(next,21000);
    next();
    function next() {
        header_txt.textContent =  header_phrases[phraseNo++];
        if(phraseNo>=header_phrases.length) phraseNo=0;
    }
}

这只是将next()函数放在队列上并等待。

函数之前对next()的调用只是将其启动而无需等待超时。

Answer 3

这是假设header_txt和header_phrases不是全局变量。 使用全局变量不是一个好主意。

var repeatIn = 3000;
phraseUpdater();

function phraseUpdater() {
    var updateCount = 0,
        phrasesCount = header_phrases.length;

    setHeader();
    setTimeout(setHeader, repeatIn);
    function setHeader() {
        header_txt.textContent = header_phrases[updateCount++ % phrasesCount] || '';
    }
}