Question

我正在尝试map课程，并在setInterval上绊倒导致无限循环。由于我只浏览了一个包含5个元素的列表，我不明白为什么会发生这种情况......它打印出所有5个数字，如

1 2 3 4 5

永远一遍又一遍：

var list = [1, 2, 3, 4, 5];

function delayedPrint(text, delay = 400) {
    setInterval(function() {
        console.log(text);
    }, delay)
}

console.log('\nMap can take 1 argument, which is each item in the array:')

list.map(function(this_list_item) {
    delayedPrint(this_list_item);
});

但是将delayedPrint(this_list_item);更改为console.log(this_list_item);代码正常工作，打印每个项目一次。

为什么会出现无限循环，如何以任意延迟打印这些项目？ `setInterval` Apparent Infinite Loop没有帮助。谢谢

Answer 1

这就是setInterval应该做的事情：

WindowOrWorkerGlobalScope mixin 的setInterval（）方法重复调用函数或执行代码片段，每次调用之间有固定的时间延迟。

然而，你想要的是setTimeout。

Answer 2

您必须使用setTimeout来延迟调用一次的功能。

每隔延迟毫秒，

setInterval会无限次地调用该函数。

如果您要实现的是打印项目，然后在延迟毫秒之后再打印一个项目，依此类推，这是实现它的一种方法（手动递增每个项目的延迟）：< / p>

var list = [1, 2, 3, 4, 5];
var delay = 400;

function delayedPrint(text, delay = 1000) {
    setTimeout(function() {
        console.log(text);
    }, delay)
}

list.map(function(this_list_item, index) {
    delayedPrint(this_list_item, index * delay);
});

顺便说一句，正如Nina正确指出的那样，map可能不是传达你在这里做什么的最佳选择，forEach会更清楚：

list.forEach(function(this_list_item, index) {
    delayedPrint(this_list_item, index * delay);
});

setInterval用法导致奇怪的无限循环

2 个答案: