闭包、promise，await题目

1

for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(new Date, i);
    }, 1000);
}
console.log(new Date, i);

外层console先输出时间和5
1s后循环内5个console（几乎）同时输入事件和5
原因: setTimeout被放入任务队列，主程序执行完后执行任务队列中的定时器

2

5 -》 5，5，5，5，5 改成5-》0，1，2，3，4
先输出5，1s后同时输出0，1，2，3，4

2.1

for (var i = 0; i < 5; i++) {
    (function (j) {
        setTimeout(function() {
            console.log(new Date, j);
        }, 1000);
    })(i)
}
console.log(new Date, i);

利用声明即执行的函数表达式

2.2

for (var i = 0; i < 5; i++) {
    setTimeout(function(j) {
        console.log(new Date, j);
    }, 1000, i);
}
console.log(new Date, i);

利用setTimeout参数

2.3

var output = function (i) {
    setTimeout(function() {
        console.log(new Date, i);
    }, 1000);
};
for (var i = 0; i < 5; i++) {
    output(i);  // 这里传过去的 i 值被复制了
}
console.log(new Date, i);

利用函数的参数是值传递

3

改成0-》1-》2-》3-》4-》5
每隔1s输出一个数

var task = [];
var output = i => new Promise ((resolve) => {
    setTimeout(() => {
        console.log(new Date, i);
        resolve();
    }, 1000*i)
})
for (var i = 0; i < 5; i++) {
    task.push(output(i));  
}
Promise.all(task).then(()=>{
    setTimeout(function () {
        console.log(new Date, i);
    }, 1000)
})

利用promise

// 模拟其他语言中的 sleep，实际上可以是任何异步操作
const sleep = (timeountMS) => new Promise((resolve) => {
    setTimeout(resolve, timeountMS);
});

(async () => {  // 声明即执行的 async 函数表达式
    for (var i = 0; i < 5; i++) {
        if (i > 0) {
            await sleep(1000);
        }
        console.log(new Date, i);
    }

    await sleep(1000);
    console.log(new Date, i);
})();

利用async和await

原文
https://juejin.cn/post/6844903474212143117#heading-0