我怎样才能正确地循环遍历一个数组，并且一次 return 1 个结果？

Question

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

是否可以用 for 循环来做到这一点？还是我应该使用其他东西？我特别需要显示的第一个项目，然后是第二个项目，而且似乎无法正确表达它以找到答案

我试过使用队列 class ，但似乎也无法让它发挥作用。这是我能想到的最接近的工作示例。

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);
    })

最好的方法是什么？

有人提到使用生成器函数，但我不知道在这种情况下这对我有何帮助，因为我需要 return 每个结果作为一个单独的车牌，而不是一组。

Answer 1

我对这个问题的理解是，您需要一种方法来 'save' 一些数据数组的索引，以便在下一次定时更改发生时它可以递增。

我已经准备了一个示例来说明如何实现这可能会适应您的特定需求。

首先，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>

我怎样才能正确地循环遍历一个数组，并且一次 return 1 个结果？

How can I properly loop through an array, and return 1 result at a time?

javascript

jquery

for-loop

marquee