Promise在循环中执行javascript睡眠功能

Question

我打算在firefox中打开一系列URL，每个URL都应在10分钟内打开，这是我的代码应在firebug控制台中执行：

function sleep (time) {
    return new Promise((resolve) => setTimeout(resolve, time));
}
var urls = ["https://www.google.com/","https://www.bing.com/","https://www.reddit.com/"];
for(var i = 0; i < urls.length; i++)
    sleep(600000 * i).then(() => {
    window.open(urls[i]); 
})

但这没有用，有人可以帮助我吗？谢谢〜

Answer 1

Promise 与 async/await 函数配合得很好。

下面将声明一个新的异步函数（即调用该函数后它将在外部执行）。异步函数的代码读起来非常容易，因为它读起来就像同步函数：

function sleep(delay) {
    return new Promise((resolve) => setTimeout(resolve, delay))
}

(async function() {
    const urls = ["https://www.google.com/","https://www.bing.com/","https://www.reddit.com/"]
    for (let url of urls) {
        await sleep(1000)
        console.log(url)
    }
})()
    

这是使用 Promise 链的版本：

function sleep(delay) {
    return new Promise((resolve) => setTimeout(resolve, delay))
}

const urls = ["https://www.google.com/","https://www.bing.com/","https://www.reddit.com/"];
let p = Promise.resolve();
for (let url of urls) {
    p = p.then( function () {
        return sleep(1000);
    } );
    p = p.then( function () {
        console.log(url);
        return Promise.resolve();
    } );
}

Answer 2

Sleep函数正在异步执行，并且for循环在执行任何sleep调用之前完成。

所以，最后的价值for循环会3和window.open功能将得到作为参数value的urls[3]这是不确定的。

看一看：

function sleep (time) {
    return new Promise((resolve) => setTimeout(resolve, time));
}
var urls = ["https://www.google.com/","https://www.bing.com/","https://www.reddit.com/"];
for(var i = 0; i < urls.length; i++)
    sleep(600*i).then(() => {
    console.log(i); 
})

一种解决方案是使用let关键字。

您应该使用let关键字，以便使用变量的封闭值i。

function sleep (time) {
    return new Promise((resolve) => setTimeout(resolve, time));
}
var urls = ["https://www.google.com/","https://www.bing.com/","https://www.reddit.com/"];
for(let i = 0; i < urls.length; i++)
    sleep(6000*i).then(() => {
    window.open(urls[i]); 
})

jsFiddle解决方案。