https://juejin.im/post/58f1fa6a44d904006cf25d22
这是一篇关于闭包的文章,看完感触很深。尽管很多人都可以知道闭包的结果会带来什么但是却很少人深究为什么。
考察
for (var i = 0; i < 5; i++) {
setTimeout(function() {
console.log(new Date, i);
}, 1000);
}
console.log(new Date, i);
结果是5,5,5,5,5,5。
第一个5是最后一个输出语句的,由于循环执行很快,所以还没等setTimeout到时间就执行完毕了。
其次的5是循环语句里面的。但是它们的先后顺序又是如何呢?
答案是几乎同步。
上面说了,for循环执行起来速度很快,加上所有定时器的时间都是1秒,所以几乎是同步完成的输出。
但,为什么都是5呢?
因为在该语句里,i是按引用传递的,所以当i为5时才执行setTimeout,当然输出为5了。
我想实现输出与下标相同
很多人一定都可以给出下面的答案
for(var i = 0; i < 5; i++) {
setTimeout(function(num){
return function(){console.log(num);}
}(i), 1000);
}
意料之中,输出为0,1,2,3,4。
有没有别的写法呢?肯定有
for(let i = 0; i < 5; i++) {
setTimeout(function(){console.log(i);}, 1000);
}
发现不同了吗?
仅仅需要把var->let就可以实现同样功能。由于let的特性,i会只存在于for这个作用域中。
for(var i = 0; i < 5; i++) {
setTimeout(function(j){console.log(j);}, 1000, i);
}
var output = function(i){
setTimeout(function(){console.log(i);}, 1000);
}
for(var i = 0; i < 5; i++) {
output(i);
}
函数的参数是按值传递的。因此传入的i非引用。
输出顺序
若想实现,等待每一次输出都在上一次输出的下一秒呢?
for(var i = 0; i < 5; i++) {
setTimeout(function(num){
return function(){console.log(num);}
}(i), 1000*i);
}
很聪明的答案,只需要等待下标秒数即可。
其他的答案,更好的?
Promise
const task = [];
for(var i = 0; i < 5; i++) {
task.push(new Promise((resolve) => {
setTimeout(function(j){
return ()=>{console.log(j);
resolve();}
}(i), 1000*i);
}));
}
Promise.all(task).then(()=>{
setTimeout(()=>{console.log(i);}, 1000);
});