异步中的顺序处理
来看看下面这段代码：
// 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来解决这个有点无聊的问题。
网友评论