微信小程序中的循环遍历问题

时间:2022-01-20 20:42:38

比如:如果在微信小程序中要遍历输出 0-9 的数,我们会使用for循环

for(var i=;i<;i++){
console.log(i);
}

确实结果也是这样:

微信小程序中的循环遍历问题

但是,如果我在循环时同时调用wx的api接口10次,那么输出的结果就会不同(这是产生了闭关的效应)

eg:每次调用一次wx.showToast()接口,并在成功时输出循环的值。

for(var i=;i<;i++){
wx.showToast({
title: 'haha',
success:function(){
console.log(i);
}
})
}

结果:

微信小程序中的循环遍历问题

可以看到输出了10次10,这是因为i自变量的作用域范围,在这里它相当于全局变量。

两种解决办法:

1.使用临时函数

 

for(var i=;i<;i++){
(function(j){
wx.showToast({
title: 'haha',
success: function () {
console.log(j);
}
})
})(i);
}

以上代码同:

for(var i=;i<;i++){
function temp(j){
wx.showToast({
title: 'haha',
success: function () {
console.log(j);
}
})
};
temp(i);
}
},

结果:

微信小程序中的循环遍历问题

2.使用ES6中let的块作用域(推荐)

for(let i=;i<;i++){
wx.showToast({
title: 'haha',
success: function () {
console.log(i);
}
})
}

结果同上。

但是如果将let i定义在函数外部,则对于循环来说还是相当于全局变量

let i;
for(i=;i<;i++){
wx.showToast({
title: 'haha',
success: function () {
console.log(i);
}
})
}

结果还是:

微信小程序中的循环遍历问题