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);
});