異步中的順序處理

來看看下面這段代碼：

// index1.js
// 已經排好序的數組
var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

var returnNums = []

for (var i = 0; i < numbers.length; i++) {
  
  // 我們確信，delayValue會被調用10次，而且調用順序是delayValue(1), delayValue(2), delayValue(3).....
  delayValue(numbers[i], value => {
    returnNums.push(value) // 成功獲取到結果后，我們把結果push進returnNums。
    
    // 我們沒法把 print(returnNums.join(', ')) 寫在 for 循環的結束后，必須寫在回調里面，這讓人有些疑惑。。。
    console.log(returnNums)
  })
}

// 令人驚訝的是（也許并不驚訝），我們看到的數字順序總是不確定的。。。（雖然是我故意造成的）。

/**==========分割線，下面是函數定義=============**/

/**
* 這是一個典型的異步函數，我們用它來模擬類似ajax這樣的請求，他會在不確定的時機中調用callback，返回傳入的value
**/
function delayValue (value, callback) {
  setTimeout(() => {
    callback(value)
  }, getRandomInt(1,200))
}

// 取隨機數
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 ]

按照我們直覺，我們應該是按順序把值push進數組的，為何最后出來的結果總是亂序的呢？

秘密就在于，回調函數的執行并不是按照 delayValue 函數的調用順序來的，再加上 delayValue 函數調用回調函數的時機時快時慢，所以就導致push的時機錯亂。

那我們嘗試不使用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 ]

于是更加奇怪的事情發生了，returnNums 的內容竟然始終只有最后一個元素，前面的元素一個都沒了。

按照這種情況推理，i 的值始終為 9，才會出現這種情況，這又一次挑戰了我們的直覺。

讓我們先忽略上面的問題，想想另外一個問題，為什么 console.log(returnNums) 不能放在for循環的結束之后？當我們實際這樣做時，就會發現，它輸出了一個空的數組。等等，我們不是已經循環完畢了嗎？怎么會這樣？

接下來讓我們揭曉一點真相，實際上整段代碼中，分為立即執行的部分，和稍后執行的部分。

// 只有這兩句是稍后執行的，其他都是立即執行
returnNums.push(value)
console.log(returnNums)

所以如果把 console.log(returnNums) 放到for循環的結束后，那么它也是立即執行的語句了，所以這個時候，returnNums 并沒有任何數據，因為此時 returnNums.push(value) 根本沒有執行。

得知事情的真相后我稍作思考，想了這么一個辦法

// 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 ]

嘿！成功了，最后一次的輸出完全按照了我們的預訂順序。

這里 callbackGenerator 立了大功，他專門用來生成用于 delayValue 的回調函數。為何要如此大費周章？我們回過頭看之前的例子(index2.js)，i 變量實際上會受到for循環的影響不斷改變數值，等到回調函數去讀取 i 變量的時候，它早已被for循環加到9了。而在index3.js中，index 變量不會受到任何的改變，他一出生就固定了值，所以，最后出來的結果符合預期。

我們再深入一點，index 變量的 作用域 實際上只存在于 callbackGenerator 函數體內，而每一次調用 callbackGenerator ，js引擎內部都會生成一個個獨立的作用域，而每個獨立的作用域中，又有一個獨立的callback，該callback只能讀取到他所在的 callbackGenerator 作用域中的 index 變量。而index1.js中，i 變量的作用域是全局的，每一個callback都用的這個變量，最后的結果就是我們上面說的那樣了。

雖然最后問題解決了，但是代碼的可讀性很差，不過天無絕人之路，下一篇文章，我們將利用ES6 的Promise來解決這個有點無聊的問題。