使用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] || '';
    }
}