1、一道关于闭包和定时器的面试题
for (var i = 0; i < 5; i++) {
setTimeout(function() {
console.log(new Date, i);
}, 1000);
}
console.log(new Date, i);
很多人可能快速的扫过代码，觉得答案是0,1,2,3,4,5
其实并不然，仔细看下代码会发现，循环过程中，几乎同时设置了5个定时器，这些定时器都会在1
s后触发，所以答案应该是立即输出一个5,1s后输出5个5
如果遇见这种题，面试官一般会追问了，怎么输出5 - >0,1,2,3,4，基本大家都会想到，闭包
for (var i = 0; i < 5; i++) {
(function(j) { // j = i
setTimeout(function() {
console.log(new Date, j);
}, 1000);
})(i);
}
console.log(new Date, i);
当然，还有另外的解决方法，我们只要每次拿到循环体内部的i值就可以
var output = function (i) {
setTimeout(function() {
console.log(new Date, i);
}, 1000);
};
for (var i = 0; i < 5; i++) {
output(i);
}
console.log(new Date, i);
变态的面试官可能会继续刁难，那么输出0 -> 1 -> 2 -> 3 -> 4 -> 5喃？
for (var i = 0; i < 5; i++) {
(function(j) { // j = i
setTimeout(function() {
console.log(new Date, j);
}, 1000*j);
})(i);
}
setTimeout(function() { // 额外增加定时器，设置为5 秒
console.log(new Date, i);
}, 1000 * i);
虽然这样确实可以达到要求，但并不完美
熟悉ES的可能很快就会想到Promise
const tasks = []; // 这里存放所有异步的 Promise
const output = (i) => new Promise((resolve) => {
setTimeout(() => {
console.log(new Date, i);
resolve();
}, 1000 * i);
});
// 生成全部的异步操作
for (var i = 0; i < 5; i++) {
tasks.push(output(i));
}
// 异步操作完成之后，输出i
Promise.all(tasks).then(() => {
setTimeout(() => {
console.log(new Date, i);
}, 1000);
});
