码迷,mamicode.com
首页 > 微信 > 详细

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

时间:2018-04-19 01:53:00      阅读:849      评论:0      收藏:0      [点我收藏+]

标签:循环   分享图片   api   就会   pre   产生   自变量   show   范围   

比如:如果在微信小程序中要遍历输出 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);
        }
      })
    }

结果还是:

技术分享图片

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

标签:循环   分享图片   api   就会   pre   产生   自变量   show   范围   

原文地址:https://www.cnblogs.com/feiquan/p/8878824.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!