循环遍历 JS 数组，然后永久以单个值结束

Posted 2023-05-07

【中文标题】循环遍历 JS 数组，然后永久以单个值结束

【英文标题】：Looping through JS array then ending on a single value permanently

【发布时间】：2021-02-15 15:02:43

【问题描述】：

我正在尝试在网站的 DIV 中打印不同的句子。 我通过遍历数组（wordCycle）来做到这一点。 遍历数组后，我希望 Umdenken. 永久显示。 但它会循环遍历数组，然后输出 Umdenken.，然后永久显示 undefined。

这是我的代码：

var wordCycle = [
    'Panierte Schuhsohlen',
    'Essbare Sitzbezüge', 
    'Häuser wie Bäume',
    'Städte wie Wälder',
    'Ein neues Bio', 
    'Masken als Nährstoffe'
];

textSequence(0);
function textSequence(i) 

    if (wordCycle.length > i) 
        setInterval(function () 
            document.getElementById("sequence").innerhtml = wordCycle[i];
            textSequence(++i);
        , 5500); // in milliseconds (1000 = 1 second)

     
    else if (wordCycle.length == i) 
        document.getElementById("sequence").innerHTML = 'Umdenken.';
    

【参考方案1】：

使用setTimeout 安排单个 递归调用，而不是setInterval：

var wordCycle = [
    'Panierte Schuhsohlen',
    'Essbare Sitzbezüge', 
    'Häuser wie Bäume',
    'Städte wie Wälder',
    'Ein neues Bio', 
    'Masken als Nährstoffe'
];

textSequence(0);
function textSequence(i) 

    if (wordCycle.length > i) 
        setTimeout(function () 
            document.getElementById("sequence").innerHTML = wordCycle[i];
            textSequence(++i);
        , 500); // in milliseconds (1000 = 1 second)

     
    else if (wordCycle.length == i) 
        document.getElementById("sequence").innerHTML = 'Umdenken.';
    

<div id="sequence"></div>

【讨论】：

效果很好，谢谢！你能告诉我如何毫不拖延地从第一句话开始吗？

您可以让函数的主体立即设置文本，并让setTimeout 再次递归调用该函数（而不是在setTimeout 中设置文本）。然后textSequence(0) 将立即更改文本。