setTimeout 在 forEach 中不起作用

Question

我有一个调用函数的 forEach 。每次调用之间需要有一个延迟。我已将其放在 forEach 内的 setTimeout 内。它不尊重第一次等待后的超时。相反，它等待一次，然后立即运行。我已将超时设置为 5 秒，并使用控制台进行确认。等待 5 秒，然后几个 foobar 控制台同时记录。

为什么我会出现这种行为？

var index = 0;
json.objects.forEach(function(obj) {
    setTimeout(function(){
        console.log('foobar');
        self.insertDesignJsonObject(obj, index);
    }, 5000);
});

Answer 1

杰森的回答完全正确，但我想我应该尝试一下，以便更好地澄清。

这实际上是一个经典的闭包问题。通常它看起来像这样：

for(var i = 0; i < 10; i++){
    setTimeout(function(){
        console.log(i);
    },i * 1000)
}

新手会期望控制台显示：

0
(0 seconds pass...)
1
(1 second passes...)
2
(etc..)

但事实并非如此！您实际上会看到数字 10 被记录了 10 次（每秒 1 次）！

“为什么会这样？”很好的问题。封闭范围。上面的 for 循环缺少闭包作用域，因为在 javascript 中，只有函数（lambda）具有闭包作用域！

请参阅：https://developer.mozilla.org/en-US/docs /Web/JavaScript/Closures

但是！如果您尝试过以下操作，您的尝试将获得所需的输出：

    json.objects.forEach(function(obj,index,collection) {
        setTimeout(function(){
            console.log('foobar');
            self.insertDesignJsonObject(obj, index);
        }, index * 5000);
    });

因为您可以访问“closur-ed”index变量 - 您可以依赖它的状态作为函数（lambda ) 被调用！

其他资源：

JavaScript 闭包如何工作？

http://javascript.info/tutorial/closures

http://code.tutsplus.com/tutorials/closures-front-返回--net-24869

Answer 2

setTimeout 是异步的。它的作用是注册一个回调函数并将其置于后台，该回调函数将在延迟后触发。而 forEach 是同步函数。因此，您的代码所做的是“一次性”注册回调，每个回调将在 5 秒后触发。

有两种方法可以避免它：

有一个索引来设置计时器。

json.objects.forEach(function(obj, index) {
    setTimeout(function(){
      // do whatever
    }, 5000 * (index + 1));
});

这种方式的延迟因素是基于你的对象的索引，所以即使你同时注册它们，它也会根据它们的索引触发自己的延迟。 index + 1 保持与问题相同的结果，因为它从 0 开始。

setInterval 循环对象

var i = 0;
var interval = setInterval(function(){
    var obj = json.objects[i];
    // do whatever
    i++;
    if(i === json.objects.length) clearInterval(interval);
}, 5000);

setInterval 与 setTimeout 类似，尽管它根据时间间隔定期触发。在这里，我们访问对象并更新间隔函数内部的索引。另外不要忘记最后清除间隔。

两者之间的区别是 setInterval 只注册了一个函数，而 setTimeout 则注册了与列表中项目数量一样多的函数。

Answer 3

forEach 同步运行，循环遍历所有元素并在五秒后为每个元素安排一个计时器回调。五秒钟后，所有这些回调都会发生。

在 2022 年，有两种主要方法：

1. 使用链式 setTimeout 和 index 变量。

2. 使用async函数、await和循环。

这是#1 的示例：

const json = {
    objects: [
        {name: "first object"},
        {name: "second object"},
        {name: "third object"},
        {name: "fourth object"},
        {name: "fifth object"},
    ],
};

function insertDesignJsonObject(obj, index) {
    console.log(obj.name, index);
}

let index = 0; // The index of the next element to show
function doNext() {
    // Do this one, increment the index
    /*self.*/insertDesignJsonObject(json.objects[index], index);
    ++index;

    // If we still have one to do, do it after a delay
    if (index < json.objects.length) {
        setTimeout(doNext, 1000); // 5000 for a five-second delay
    }
}
doNext();

这是#2：

const json = {
    objects: [
        {name: "first object"},
        {name: "second object"},
        {name: "third object"},
        {name: "fourth object"},
        {name: "fifth object"},
    ],
};

function insertDesignJsonObject(obj, index) {
    console.log(obj.name, index);
}

const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

(async () => {
    for (let index = 0; index < json.objects.length; ++index) {
        // Wait to do this one until a delay after the last one
        if (index > 0) {
            await delay(1000); // 5000 for five seconds
        }

        // Do this one
        /*self.*/insertDesignJsonObject(json.objects[index], index);
    }
})();

Answer 4

var i =0;
img_list.forEach(function(item){
    setTimeout(function(){
        img_class.setAttribute('src',item)
        console.log(item)
    },2000 * i++)
})