问题

一位同学在for循环里连续发送了4个ajax请求,然后在success的回调函数里使用了自增变量i,但是i值并不总能达到他的正确期望,经常出现问题。

我把这个问题同理描述为setTimeout的使用:

// 代码一
for (var i = 0; i < 4; i++) {
    setTimeout(function(){
        console.log(i);
    }, 0);
}
// 输出结果如下
// 4
// 4
// 4
// 4

原因

JavaScript是单线程执行的,setTimeout函数会被放到任务队列里等待执行(即使等待时间为0),当for循环执行完之后,i的值已经变成了 4

ajax请求的回调函数也是这样,加上同时发送多个请求,它们的返回顺序也并不总是和发送顺序一致。

解决方法

setTimeoutajax部分抽离成一个函数,然后传值调用它。这样在函数里会保存i的一个副本,从而保证和期望效果一致。

// 代码二
function callback(temp){
    setTimeout(function(){
        console.log(temp);
    }, 0);
}
for (var i = 0; i < 4; i++) {
    callback(i);
}
// 输出结果如下
// 0
// 1
// 2
// 3

西山雨
1.3k 声望26 粉丝

fighting