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

结果还是:

微信小程序中的循环遍历问题的更多相关文章

  1. 在微信小程序中,如何获取 for 循环的 index

    微信小程序中,for 循环的 index(索引值)可以用wx:for-index="index"来获取. <view class="item" wx:fo ...

  2. 全栈开发工程师微信小程序-中

    全栈开发工程师微信小程序-中 多媒体及其他的组件 navigator 页面链接 target 在哪个目标上发生跳转,默认当前小程序,可选值self/miniProgram url 当前小程序内的跳转链 ...

  3. 微信小程序之for循环

    在微信小程序中也有for循环,用于进行列表渲染. 官方实例 打开微信开发者文档,在框架部分的视图层-->wxml-->列表渲染中可以看到官方给出的for循环实例,在实例中 可以看到下面相关 ...

  4. 网页或微信小程序中使元素占满整个屏幕高度

    在项目中经常要用到一个容器元素占满屏幕高度和宽度,然后再在这个容器元素里放置其他元素. 宽度很简单就是width:100% 但是高度呢,我们知道的是height:100%必须是在父元素的高度给定了的情 ...

  5. 在微信小程序中使用富文本转化插件wxParse

    在微信小程序中我们往往需要展示一些丰富的页面内容,包括图片.文本等,基本上要求能够解析常规的HTML最好,由于微信的视图标签和HTML标签不一样,但是也有相对应的关系,因此有人把HTML转换做成了一个 ...

  6. 微信小程序中发送模版消息注意事项

    在微信小程序中发送模版消息 参考微信公众平台Api文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/notice.html#模版消息管理 此参考地址 ...

  7. 微信小程序中placeholder的样式

    通常,现代浏览器大多支持::placeholder选择器,用于设置placeholder的样式,但是在微信小程序中并不支持这种方式,而是提供了一个专门的属性(placeholder-class)来处理 ...

  8. 微信小程序中转义字符的处理

    在微信小程序开发过程中,有时候会用到常用的一些特殊字符如:‘<’.‘>’.‘&’.‘空格’等,微信小程序同样支持对转义字符的处理,下面提供两种方法用来处理微信小程序中转义字符的处理 ...

  9. 微信小程序中用户登录和登录态维护

    提供用户登录以及维护用户的登录状态,是一个拥有用户系统的软件应用普遍需要做的事情.像微信这样的一个社交平台,如果做一个小程序应用,我们可能很少会去做一个完全脱离和舍弃连接用户信息的纯工具软件. 让用户 ...

随机推荐

  1. 【python小工具】我在bilibili个人资料里控制家里的电脑

    今天在52学习到的,大佬A是在网易云音乐   歌单设置  里,过程没看到,封装一个exe了,可以控制本地cmd命令\ 思路很奇特,想了一下感觉实现应该简单,就打算自己实现一下\ 两步走:网页正则和本地 ...

  2. 发福利了!!超过100本的linux免费书籍

    New Books Kindle Fire App Development Essentials iPhone iOS 6 Development Essentials CentOS 6 Essent ...

  3. Perl分片技术

    分片(slice) 在perl中,如果想要取得一部分变量.一部分列表内容.一部分hash内容,可以采用分片(切片)的方式. 注意,perl并未提供字符串的切片方式,但可以使用内置函数substr()来 ...

  4. [转]php中 curl模拟post发送json并接收json

    本文转自:https://blog.csdn.net/pangchengyong0724/article/details/52103962 本地模拟请求服务器数据,请求数据格式为json,服务器返回数 ...

  5. 记录Newtonsoft.Json的日常用法

    最近在做一个使用基于.net mvc 实现前后台传输Json的实例.网上找了一些资料.发现在开发的时候,许多的数据交互都是以Json格式传输的.其中涉及序列化对象的使用的有DataContractJs ...

  6. WPF TextBlock IsTextTrimmed 判断文本是否超出

    WPF TextBlock/TextBox 设置TextTrimming情况下 判断 isTextTrimmed(Text 文本是否超出 是否出现了省略号) private bool IsTextTr ...

  7. SSLTLS 服务器瞬时 Diffie-Hellman 公共密钥过弱【原理扫描】解决说明

    一.  修改SSL密码套件 1.1  加固方法: 1.1.1  操作步骤: 第一步:按下' Win + R',进入"运行",键入" gpedit.msc",打开 ...

  8. C#中struct和class的区别详解

    本文详细分析了C#中struct和class的区别,对于C#初学者来说是有必要加以了解并掌握的. 简单来说,struct是值类型,创建一个struct类型的实例被分配在栈上.class是引用类型,创建 ...

  9. python中的tcp

    目录 TCP简介 TCP介绍 TCP特点 TCP与UDP的不同点 udp通信模型 TCP通信模型 tcp客户端 tcp服务器 tcp注意点 TCP简介 TCP介绍 TCP协议,传输控制协议(英语:Tr ...

  10. python面向对象学习(三)私有属性和私有方法

    目录 1. 应用场景和定义方式 2. 伪私有属性和私有方法 在java或者其他的编程语言中,使用访问修饰符来限制属性和方法的访问级别,一般有public.protected.default.priva ...