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