js中的(function(){...})()

js中的(function(){...})()

---

作为一个前端小白，今天遇到了一个恶心我一天的问题，先看我的代码。

for(var i=0;i<addrs.length;i++){

    var info = "<div>订单数量:"+addrs[i][1]+"</div>";
    
    myGeo.getPoint(addrs[i][0], function(point){
        marker = new BMap.Marker(point);
        map.addOverlay(marker);
        console.log(info);
        addClickHandler(info,marker,point);
    }, "上海市");
}

我的想法是程序从上往下执行 每次==addClickHandler()里的info值都会不一样，但是console.log(info)==每次的打印结果都是一样的，我一个人默默捣鼓（debug）了半天，发现代码的执行顺序跟我预想的不一样。我百度了半天找到了一种解决办法，把循环体里的代码用(function(){...})() 包裹，代码如下，

for(var i=0;i<addrs.length;i++){
    (function(){
        var info = "<div>订单数量:"+addrs[i][1]+"</div>";
        myGeo.getPoint(addrs[i][0], function(point){
            marker = new BMap.Marker(point);
            map.addOverlay(marker);
            console.log(info);
            addClickHandler(info,marker,point);
        }, "上海市");
    })()
}

这样每次循环我的输出结果都是不一样的。虽然解决了问题 但是 至于为什么我还是不明白。希望知道的大佬能在我的评论区留言。