javascript - setInterval 的使用导致奇怪的无限循环

Question

我正在尝试 map 类(class)，但被 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); 代码可以正常工作，打印每个项目 1 次。

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

Answer 1

您必须使用 setTimeout 来延迟调用函数一次。

setInterval 将在每延迟毫秒内无限次调用该函数。

如果您想要实现的是打印一个项目，然后在延迟毫秒后打印另一个项目，依此类推，这是实现它的一种方法(手动增加每个项目的延迟):

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