javascript - 如何正确循环遍历数组并一次返回 1 个结果？

Question

希望一次只返回一个项目，并在本地存储中的数组上循环，目前我已经用 css 构建了一个选取框来模拟滚动动画。目标是以只返回一个的方式循环
元素，然后在第二个循环中，返回第二个项目，依此类推。这可以通过 setInterval 或 setTimeout 实现吗？索引在延迟或超时之间循环在哪里？

是否可以使用 for 循环来做到这一点？还是我应该使用其他东西？我特别需要显示的第一个项目，然后是第二个项目，并且似乎无法正确表达它以找到我尝试使用 Queue 类的答案，但似乎也无法让它工作。这是我能想出的最接近的工作示例。

Gif Exmaple

下面的代码

    const marqueeMonthlies = () => {
        insertMarquee.empty();
        let marqueeMonthlyPlates = JSON.parse(localStorage.getItem('Monthly Plates'));

        for (i = 0; i < marqueeMonthlyPlates.length; i++) {
        insertMarquee.append(`
            <div class="container" id="generatedMonthlyPlates">
            <input type="text" width="100px" name="monthlyLicensePlate" id="${marqueeMonthlyPlates[i]}" class="licensePlate" placeholder="AB12345" value="${marqueeMonthlyPlates[i]}"/>
            </div>
            `)   
        }
        
    }
        startMonthlies.click((event) => {
        event.preventDefault();
        setInterval(marqueeMonthlies(),1000);
    })

最好的方法是什么？
有人提到使用生成器函数，但我不知道在这种情况下这对我有什么帮助，因为我需要将每个结果作为单个车牌返回，而不是它们的组。

Answer 1

我对这个问题的理解是，您需要一种方法来“保存”某些数据数组的索引，以便在下一次定时更改发生时它可以递增。
我准备了一个示例来说明如何实现这一点，以适应您的特定需求。
首先，setInterval (在我的示例中，通过按下按钮开始)定义何时进行更改。
要执行的过程放置在 setInterval 的函数参数中。称呼。在我的示例中，这仅涉及在页面上显示数组元素的字符串内容。
重要的一点是该数组由在全局范围内定义但从函数内部递增的数字索引引用。因此，在间隔的每个周期中，读取的索引都比上一个多一个。
为了处理越界错误(如果索引大于数组的长度会发生这种情况)，使用 index %= content.length 对索引进行余数除以数组的长度。这样在数组末尾递增索引，将其重置为 0 以在数组开头继续。setInterval分配给一个变量，以便clearInterval 可以引用它如果要停止循环过程。
因为索引是一个全局变量，如果间隔被取消，它的值仍然存在，所以如果再次设置间隔，索引将是循环停止的值，所以效果是从发生暂停的地方继续(而不是每次循环恢复时从第一个元素开始)。setInterval里面的函数可以修改以处理所需的任何数据，相关位是它保留了递增索引值的内存。
工作片段:

const display = document.getElementById("output");
const content = ["cat", "dog", "rabbit", "goldfish", "tortoise", "pony", "chicken"];
let intervalId;
let index=0;

function cycleContent (){

intervalId = setInterval(() => {
index %= content.length
display.innerText = content[index];
index++;
},1000);
} // end cycleContent function;

div {
height: 1.2em;
}

<p><button onclick="cycleContent()">start</button></p>

<div id="output"> </div>

<p><button onclick="clearInterval(intervalId)">stop</button></p>