时间戳

首页 > 解决方案 > 使用 vanilla JS 自动多次运行循环

javascript - 使用 vanilla JS 自动多次运行循环

问题描述

我已经成功地将实现我的目标的代码拼凑在一起。但是，我想从更高级的 vanilla 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);

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

标签： javascript

解决方案

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

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 的值都会有所不同。

推荐阅读