前端闭包 解决异步执行问题

我主要用来解决 请求异步 执行的问题, 不论是ajax请求，还是wx.request，以及其他异步执行的方法

一，问题

由于request是异步执行的原因，请求还没有返回，循环已经执行完；

所以按照下面代码打印 三次结果值都是 索引 2

var dataList = ['aa','bb','bb']
for(var ind in dataList){
    wx.request({
        url:'xxx',
        sucess:function(res){
            console.log(ind)  // 三次都是2
        }
    })
}

二，解决办法

使用闭包来解决该问题: 通过在内部创建一个自执行函数保存当次循环的索引

var dataList = ['aa','bb','bb']
for(var ind in dataList){
    (function(data){
        wx.request({
            url:'xxx',
            sucess:function(res){
                console.log(ind)
            }
        })
    })(ind)
}
// 通过闭包函数参数保存ind

这样就能每次循环时，在请求回调函数中使用档次循环的索引了。

 

或这样写也行，换个形式而已：

var dataList = ['aa','bb','bb']
for(var ind in dataList){
    function fn(data){
        wx.request({
            url:'xxx',
            sucess:function(res){
                console.log(ind)
            }
        })
    }
    fn(ind)
}

当然也可以直接将循环体封装为一个函数来调用：

var dataList = ['aa','bb','bb']
for(var ind in dataList){
    fn(ind)
}
// 通过闭包函数参数保存ind
​
function fn(ind){
    wx.request({
        url:'xxx',
        sucess:function(res){
            console.log(ind)
        }
    })
}

这样每次打印的就是当次循环的索引了