数组执行中的超时不会首先执行

Question

我试图在map函数中打印超时的文本，然后说它已经完成，但"完成"在数组之前打印，我不知道如何修复它：

const arrayImages = [
[
{
url: 'img/man.jpg',
}, 
{
url: 'img/bike.jpg',
}, 
{
url: 'img/sun.jpg'
},
]
]
function clickMe(){  
arrayImages[0].map((element, index) => {
setTimeout(() => {
alert(index);
if (index === 5)
return;
},2000 * index);  
});
alert("Done");
}

<button onclick="clickMe()" type="button">Click Me!</button>

Answer 1

您的alert是同步执行的——早在进行任何异步回调调用之前。展示"；完成"；是执行最后一次setTimeout回调时，所以index是arrayImages[0].length-1时。

但这并不是一种非常优雅的方法。此外，map返回一个数组，因此这不是真正合适的循环方法。

相反，看看承诺。

首先承诺setTimeout，然后在async函数中使用普通的for循环：

// Promisify setTimeout
const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
const arrayImages = [[{ url: 'img/man.jpg',},{ url: 'img/bike.jpg',},{ url: 'img/sun.jpg'},]]
async function clickMe() {
for (const element of arrayImages[0]) {
await delay(1000);
console.log(element.url);
}
console.log("done");
}

<button onclick="clickMe()" type="button">Click Me!</button>