vue js for循环里添加了this.$get.get(),在里面的i变成了最后叠加的值

Question

for(var i=0;i<4;i++){
    console.log(i);
    this.$http.get('json/room'+this.imgB[i].id+'.json').then(function(response){
    console.log(i);
     ...
    }
}

第一个console.log的值是 0 1 2 3

第二个console的值是 4 4 4 4

为什么呢 ？

Answer 1

闭包问题 循环四次引用的是同一个 i ，输出最后 i++ 的 4，解决办法可以写一个自执行函数，（i）作为函数的变量

简单的例子，当 for 循环里包含 setTimeout 时，

for (var i = 1; i <= 5; i++) {
    setTimeout((function time(){
        console.log( i );
    }), 0);
}
// 6 6 6 6 6

解决办法之一

for (var i = 1; i <= 5; i++) {
    setTimeout((function time(i){
        console.log( i );
    })(i), 0);
}

// 1 2 3 4 5