異步中的順序處理
來(lái)看看下面這段代碼：
// index1.js
// 已經(jīng)排好序的數(shù)組
var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
var returnNums = []
for (var i = 0; i < numbers.length; i++) {
// 我們確信疼燥，delayValue會(huì)被調(diào)用10次绢彤，而且調(diào)用順序是delayValue(1), delayValue(2), delayValue(3).....
delayValue(numbers[i], value => {
returnNums.push(value) // 成功獲取到結(jié)果后累榜，我們把結(jié)果push進(jìn)returnNums把夸。
// 我們沒(méi)法把 print(returnNums.join(', ')) 寫在 for 循環(huán)的結(jié)束后旁舰，必須寫在回調(diào)里面锋华，這讓人有些疑惑。鬓梅。供置。
console.log(returnNums)
})
}
// 令人驚訝的是（也許并不驚訝），我們看到的數(shù)字順序總是不確定的绽快。芥丧。。（雖然是我故意造成的）坊罢。
/**==========分割線续担，下面是函數(shù)定義=============**/
/**
* 這是一個(gè)典型的異步函數(shù)，我們用它來(lái)模擬類似ajax這樣的請(qǐng)求活孩，他會(huì)在不確定的時(shí)機(jī)中調(diào)用callback物遇，返回傳入的value
**/
function delayValue (value, callback) {
setTimeout(() => {
callback(value)
}, getRandomInt(1,200))
}
// 取隨機(jī)數(shù)
function getRandomInt (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min
}
$ node index1.js
[ 10 ]
[ 10, 9 ]
[ 10, 9, 3 ]
[ 10, 9, 3, 8 ]
[ 10, 9, 3, 8, 6 ]
[ 10, 9, 3, 8, 6, 1 ]
[ 10, 9, 3, 8, 6, 1, 2 ]
[ 10, 9, 3, 8, 6, 1, 2, 4 ]
[ 10, 9, 3, 8, 6, 1, 2, 4, 7 ]
[ 10, 9, 3, 8, 6, 1, 2, 4, 7, 5 ]
按照我們直覺(jué)，我們應(yīng)該是按順序把值push進(jìn)數(shù)組的憾儒，為何最后出來(lái)的結(jié)果總是亂序的呢询兴？
秘密就在于，回調(diào)函數(shù)的執(zhí)行并不是按照 delayValue 函數(shù)的調(diào)用順序來(lái)的起趾，再加上 delayValue 函數(shù)調(diào)用回調(diào)函數(shù)的時(shí)機(jī)時(shí)快時(shí)慢诗舰，所以就導(dǎo)致push的時(shí)機(jī)錯(cuò)亂。
那我們嘗試不使用push训裆，我們把 returnNums.push(value) 改為 returnNums[i] = value眶根。
// index2.js
// 省略其他的代碼
for (var i = 0; i < numbers.length; i++) {
delayValue(numbers[i], value => {
returnNums[i] = value
console.log(returnNums)
})
}
$ node index2.js
[ , , , , , , , , , , 6 ]
[ , , , , , , , , , , 10 ]
[ , , , , , , , , , , 7 ]
[ , , , , , , , , , , 9 ]
[ , , , , , , , , , , 5 ]
[ , , , , , , , , , , 4 ]
[ , , , , , , , , , , 2 ]
[ , , , , , , , , , , 3 ]
[ , , , , , , , , , , 8 ]
[ , , , , , , , , , , 1 ]
于是更加奇怪的事情發(fā)生了，returnNums 的內(nèi)容竟然始終只有最后一個(gè)元素边琉，前面的元素一個(gè)都沒(méi)了属百。
按照這種情況推理，i 的值始終為 9变姨，才會(huì)出現(xiàn)這種情況族扰，這又一次挑戰(zhàn)了我們的直覺(jué)。
讓我們先忽略上面的問(wèn)題定欧，想想另外一個(gè)問(wèn)題渔呵，為什么 console.log(returnNums) 不能放在for循環(huán)的結(jié)束之后？當(dāng)我們實(shí)際這樣做時(shí)忧额，就會(huì)發(fā)現(xiàn)厘肮，它輸出了一個(gè)空的數(shù)組。等等睦番，我們不是已經(jīng)循環(huán)完畢了嗎类茂？怎么會(huì)這樣耍属？
接下來(lái)讓我們揭曉一點(diǎn)真相，實(shí)際上整段代碼中巩检，分為立即執(zhí)行的部分厚骗，和稍后執(zhí)行的部分。
// 只有這兩句是稍后執(zhí)行的兢哭，其他都是立即執(zhí)行
returnNums.push(value)
console.log(returnNums)
所以如果把 console.log(returnNums) 放到for循環(huán)的結(jié)束后领舰，那么它也是立即執(zhí)行的語(yǔ)句了，所以這個(gè)時(shí)候迟螺，returnNums 并沒(méi)有任何數(shù)據(jù)冲秽，因?yàn)榇藭r(shí) returnNums.push(value) 根本沒(méi)有執(zhí)行。
得知事情的真相后我稍作思考矩父，想了這么一個(gè)辦法
// index3.js
var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
var returnNums = []
function callbackGenerator (index) {
return function (value) {
returnNums[index] = value
console.log(returnNums)
}
}
for (var i = 0; i < numbers.length; i++) {
delayValue(numbers[i], callbackGenerator(i))
}
function delayValue (value, callback) {
setTimeout(() => {
callback(value)
}, getRandomInt(1,200))
}
function getRandomInt (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min
}
$ node index3.js
[ , , , , , 6 ]
[ , , , , 5, 6 ]
[ , , , , 5, 6, , 8 ]
[ , , , 4, 5, 6, , 8 ]
[ 1, , , 4, 5, 6, , 8 ]
[ 1, , , 4, 5, 6, 7, 8 ]
[ 1, , 3, 4, 5, 6, 7, 8 ]
[ 1, , 3, 4, 5, 6, 7, 8, , 10 ]
[ 1, , 3, 4, 5, 6, 7, 8, 9, 10 ]
[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
嘿锉桑！成功了，最后一次的輸出完全按照了我們的預(yù)訂順序窍株。
這里 callbackGenerator 立了大功民轴，他專門用來(lái)生成用于 delayValue 的回調(diào)函數(shù)。為何要如此大費(fèi)周章球订？我們回過(guò)頭看之前的例子(index2.js)后裸，i 變量實(shí)際上會(huì)受到for循環(huán)的影響不斷改變數(shù)值，等到回調(diào)函數(shù)去讀取 i 變量的時(shí)候冒滩，它早已被for循環(huán)加到9了微驶。而在index3.js中，index 變量不會(huì)受到任何的改變旦部，他一出生就固定了值祈搜，所以较店，最后出來(lái)的結(jié)果符合預(yù)期士八。
我們?cè)偕钊胍稽c(diǎn)，index 變量的 作用域 實(shí)際上只存在于 callbackGenerator 函數(shù)體內(nèi)梁呈，而每一次調(diào)用 callbackGenerator 婚度，js引擎內(nèi)部都會(huì)生成一個(gè)個(gè)獨(dú)立的作用域，而每個(gè)獨(dú)立的作用域中官卡，又有一個(gè)獨(dú)立的callback蝗茁，該callback只能讀取到他所在的 callbackGenerator 作用域中的 index 變量。而index1.js中寻咒，i 變量的作用域是全局的哮翘，每一個(gè)callback都用的這個(gè)變量，最后的結(jié)果就是我們上面說(shuō)的那樣了毛秘。
雖然最后問(wèn)題解決了饭寺，但是代碼的可讀性很差阻课，不過(guò)天無(wú)絕人之路，下一篇文章艰匙，我們將利用ES6 的Promise來(lái)解決這個(gè)有點(diǎn)無(wú)聊的問(wèn)題限煞。
