for循环里使用 setTimeout 和 回调函数 常见的问题

问题

一位同学在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请求的回调函数也是这样，加上同时发送多个请求，它们的返回顺序也并不总是和发送顺序一致。

解决方法

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

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