- 首先一開始是下面這樣子的：
for (var i = 0; i < 5; i++) {
setTimeout(function() {
console.log(new Date, i);
}, 1000);
}
console.log(new Date, i);
上面的代碼等同于：
for (var i = 0; i < 5; i++) {
function xxx() {
console.log(new Date, i);
}
setTimeout(xxx, 1000);
} - 注意：setTimeout里面?zhèn)魅氲牡谝粋€(gè)匿名函數(shù)戏仓，等價(jià)于在setTimeout語句外面定義的一個(gè)函數(shù)。所以它的閉包范圍是變量i所在的作用域户辱，所以可以訪問到i.
- 解析：大家都知道 i 是外面的變量济瓢，所有的setTimeout里面的函數(shù)都會(huì)指向同一個(gè) i ,所以最終輸出：
Sat Mar 25 2017 12:40:11 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間) 5
undefined
VM87:3 Sat Mar 25 2017 12:40:12 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間) 5
VM87:3 Sat Mar 25 2017 12:40:12 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間) 5
VM87:3 Sat Mar 25 2017 12:40:12 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間) 5
VM87:3 Sat Mar 25 2017 12:40:12 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間) 5
VM87:3 Sat Mar 25 2017 12:40:12 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間) 5
- 下面改造開始：要讓控制臺(tái)能夠輸出1234
-
可以用閉包：（每次把新的變量i傳進(jìn)一個(gè)匿名的立即執(zhí)行函數(shù)崎淳，每次 j
都能得到不同的 i 蝇裤，因?yàn)閖在匿名函數(shù)的作用域內(nèi)掷漱，函數(shù)的執(zhí)行作用域每執(zhí)行一次都會(huì)重新生成全封，所以每次的 j 都不是同一個(gè)）
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); 可以用傳參法：（其實(shí)是把閉包的匿名函數(shù)擴(kuò)展出來）
function wrapper(j) {
// function fn() {
// console.log(new Date, j);
// }
// setTimeout(fn,1000);
// 上面全部的寫法马昙，等價(jià)于：
setTimeout(function () {
console.log(new Date, j);
},1000);
}
for (var i = 0; i < 5; i++) {
wrapper(i);
}
console.log(new Date, i);
輸出如下：
Sat Mar 25 2017 13:20:57 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間) 5
undefined
VM94:8 Sat Mar 25 2017 13:20:58 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間) 0
VM94:8 Sat Mar 25 2017 13:20:58 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間) 1
VM94:8 Sat Mar 25 2017 13:20:58 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間) 2
VM94:8 Sat Mar 25 2017 13:20:58 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間) 3
VM94:8 Sat Mar 25 2017 13:20:58 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間) 4
注意：這里有一個(gè)容易犯錯(cuò)的點(diǎn)，setTimeout的第一個(gè)參數(shù)要求的是一個(gè)函數(shù)的引用刹悴，而不是執(zhí)行一個(gè)函數(shù)行楞，所以只能傳入函數(shù)名xxx的形式，而不能傳入xxx(a,b)土匀，這也意味著不能在xxx上直接傳參子房。
- 所以，要傳參的話就轧，
只能在setTimeout外面再包裹一層函數(shù)证杭，然后定制編寫xxx函數(shù)。
再補(bǔ)充一個(gè)重要知識(shí)點(diǎn)妒御，如果一定要在xxx中傳參解愤，又不想用閉包，可以使用setTimeout的第3個(gè)參數(shù)乎莉，從第3個(gè)參數(shù)往后的參數(shù)送讲，都會(huì)傳入xxx里作為形參使用。
- 例如：上面的代碼也可以寫成：
setTimeout(function(j) {
console.log(new Date, j); //可以輸出01234
}, 1000 ,i); - 如果硬是在setTimeout()中傳入的xxx()的形式惋啃，那么只會(huì)以正常任務(wù)的方式立即執(zhí)行xxx()哼鬓，而不會(huì)放入任務(wù)隊(duì)列里去，也就是定時(shí)器失效肥橙。
- 例如：
for (var i=0; i<5; i++){
function xxx(j) {
console.log(new Date,j)
}
setTimeout(xxx(i),1000);
}
console.log(new Date, i);
以上代碼的輸出如下：
Sat Mar 25 2017 13:37:27 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間) 0
VM2209:3 Sat Mar 25 2017 13:37:27 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間) 1
VM2209:3 Sat Mar 25 2017 13:37:27 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間) 2
VM2209:3 Sat Mar 25 2017 13:37:27 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間) 3
VM2209:3 Sat Mar 25 2017 13:37:27 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間) 4
VM2209:7 Sat Mar 25 2017 13:37:27 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間) 5
undefined
- 解析：可以看到魄宏，所有時(shí)間幾乎是同一時(shí)刻輸出的，而且是按012345的順序存筏，最后退出函數(shù)返回undefined宠互，也就是說在退出函數(shù)前，setTimeout里的xxx就已經(jīng)執(zhí)行了椭坚，并沒有進(jìn)入任務(wù)隊(duì)列予跌。由此可以說明，setTimeout的第一個(gè)參數(shù)期待的是函數(shù)名善茎，而不是一個(gè)函數(shù)的執(zhí)行券册。
- 當(dāng)然，如果xxx()執(zhí)行后返回的是一個(gè)函數(shù)，理論上也可以設(shè)置定時(shí)器函數(shù)烁焙，但傳參又出現(xiàn)問題航邢，太過復(fù)雜，現(xiàn)實(shí)暫時(shí)沒有遇到必須這樣的問題骄蝇，不作討論膳殷。
ES6及Promise登場
- 上述還可以用ES6及Promise來實(shí)現(xiàn)，具體如下：
var tasks=[];
function output(j) {
var promise = new Promise( function(resolve, reject) {
setTimeout(function () {
console.log(new Date(), j);
resolve(j);
// console.log("這是一個(gè)小補(bǔ)充喲"+j);
},1000 * i);
});
promise.then(function (j) {
// console.log("這是then里的一點(diǎn)小補(bǔ)充喲"+j);
});
return promise;
}
for (var i=0;i<5;i++){
tasks.push(output(i)); //執(zhí)行順序:首先在這里將定時(shí)器設(shè)置好九火，
// 也就是循環(huán)設(shè)置定時(shí)器赚窃，由于執(zhí)行時(shí)間很快，每次循環(huán)的間隔可以忽略不計(jì)岔激，
// 所以可以認(rèn)為是設(shè)置了5個(gè)時(shí)間分別為0~4s的定時(shí)器勒极，已經(jīng)開始計(jì)時(shí)。
// 計(jì)時(shí)后返回promise對象虑鼎，放在tasks數(shù)組中
}
// 最后辱匿，在這里相當(dāng)于是一個(gè)總的監(jiān)聽器，當(dāng)前面4個(gè)任務(wù)都resolve以后震叙，執(zhí)行最后一個(gè)設(shè)置定時(shí)器任務(wù)掀鹅，
// 到時(shí)間以后，執(zhí)行輸出5
// 關(guān)于執(zhí)行順序媒楼，前4個(gè)task是靠定時(shí)器的時(shí)間差別來決定先后輸出順序的乐尊，最后一個(gè)5的task，是依靠異步回調(diào)來執(zhí)行的划址。
Promise.all(tasks).then(function () {
setTimeout(function () {
console.log(new Date(), i);
},1000);
}); - 解析：// 關(guān)于任務(wù)隊(duì)列：
// 首先第一趟主任務(wù)隊(duì)列走下來扔嵌，執(zhí)行了設(shè)置定時(shí)任務(wù)，將promise對象放入tasks數(shù)組夺颤，并設(shè)置好then回調(diào)的工作痢缎。
// 然后第二趟，執(zhí)行定時(shí)任務(wù)隊(duì)列世澜，運(yùn)行consolo.log語句独旷，
// 然后遇到resolve，需要調(diào)用相應(yīng)的then里面的回調(diào)語句（如果有的話）寥裂。
// 但是注意嵌洼，這里調(diào)用then的時(shí)機(jī)，是在本次任務(wù)的主代碼執(zhí)行完畢后封恰，
// 也就是說麻养，如果setTimeout語句中的resolve()后面還有執(zhí)行語句，要先執(zhí)行那些語句诺舔，最后才執(zhí)行resolve對應(yīng)的then回調(diào)鳖昌。 - 要確定resolve相應(yīng)的回調(diào)語句的執(zhí)行順序备畦，可以看下面的輸出結(jié)果（將代碼里的兩句console.log去掉注釋即可）：
Sat Apr 01 2017 13:15:47 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間) 0
(index):41 這是一個(gè)小補(bǔ)充喲0
(index):45 這是then里的一點(diǎn)小補(bǔ)充喲0
(index):39 Sat Apr 01 2017 13:15:48 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間) 1
(index):41 這是一個(gè)小補(bǔ)充喲1
(index):45 這是then里的一點(diǎn)小補(bǔ)充喲1
(index):39 Sat Apr 01 2017 13:15:49 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間) 2
(index):41 這是一個(gè)小補(bǔ)充喲2
(index):45 這是then里的一點(diǎn)小補(bǔ)充喲2
(index):39 Sat Apr 01 2017 13:15:50 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間) 3
(index):41 這是一個(gè)小補(bǔ)充喲3
(index):45 這是then里的一點(diǎn)小補(bǔ)充喲3
(index):39 Sat Apr 01 2017 13:15:51 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間) 4
(index):41 這是一個(gè)小補(bǔ)充喲4
(index):45 這是then里的一點(diǎn)小補(bǔ)充喲4
(index):60 Sat Apr 01 2017 13:15:52 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間) 5
最后強(qiáng)調(diào)一遍，resolve的回調(diào)函數(shù)是在本輪“事件循環(huán)”結(jié)束時(shí)執(zhí)行许昨，setTimeout(fn, 0)在下一輪“事件循環(huán)”開始時(shí)執(zhí)行懂盐。
-
如果覺得上面的例子太復(fù)雜，看下面：
setTimeout(function () {
console.log('three');
}, 0);Promise.resolve().then(function () { console.log('two'); }); console.log('one'); // one // two // three
