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

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

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

确实结果也是这样:

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

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

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

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

结果:

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

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

两种解决办法:

1.使用临时函数

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

以上代码同:

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

结果:

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

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

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

结果同上。

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

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

结果还是:

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

相关推荐