微信小程序中的循环遍历问题
比如:如果在微信小程序中要遍历输出 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);
}
})
}
结果还是:

微信小程序中的循环遍历问题的更多相关文章
- 在微信小程序中,如何获取 for 循环的 index
微信小程序中,for 循环的 index(索引值)可以用wx:for-index="index"来获取. <view class="item" wx:fo ...
- 全栈开发工程师微信小程序-中
全栈开发工程师微信小程序-中 多媒体及其他的组件 navigator 页面链接 target 在哪个目标上发生跳转,默认当前小程序,可选值self/miniProgram url 当前小程序内的跳转链 ...
- 微信小程序之for循环
在微信小程序中也有for循环,用于进行列表渲染. 官方实例 打开微信开发者文档,在框架部分的视图层-->wxml-->列表渲染中可以看到官方给出的for循环实例,在实例中 可以看到下面相关 ...
- 网页或微信小程序中使元素占满整个屏幕高度
在项目中经常要用到一个容器元素占满屏幕高度和宽度,然后再在这个容器元素里放置其他元素. 宽度很简单就是width:100% 但是高度呢,我们知道的是height:100%必须是在父元素的高度给定了的情 ...
- 在微信小程序中使用富文本转化插件wxParse
在微信小程序中我们往往需要展示一些丰富的页面内容,包括图片.文本等,基本上要求能够解析常规的HTML最好,由于微信的视图标签和HTML标签不一样,但是也有相对应的关系,因此有人把HTML转换做成了一个 ...
- 微信小程序中发送模版消息注意事项
在微信小程序中发送模版消息 参考微信公众平台Api文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/notice.html#模版消息管理 此参考地址 ...
- 微信小程序中placeholder的样式
通常,现代浏览器大多支持::placeholder选择器,用于设置placeholder的样式,但是在微信小程序中并不支持这种方式,而是提供了一个专门的属性(placeholder-class)来处理 ...
- 微信小程序中转义字符的处理
在微信小程序开发过程中,有时候会用到常用的一些特殊字符如:‘<’.‘>’.‘&’.‘空格’等,微信小程序同样支持对转义字符的处理,下面提供两种方法用来处理微信小程序中转义字符的处理 ...
- 微信小程序中用户登录和登录态维护
提供用户登录以及维护用户的登录状态,是一个拥有用户系统的软件应用普遍需要做的事情.像微信这样的一个社交平台,如果做一个小程序应用,我们可能很少会去做一个完全脱离和舍弃连接用户信息的纯工具软件. 让用户 ...
随机推荐
- mysql 开发进阶篇系列 45 物理备份与恢复(xtrabackup 安装,用户权限,配置)
一. 安装说明 安装XtraBackup 2.4 版本有三种方式: (1) 存储库安装Percona XtraBackup(推荐) (2 )下载的rpm或apt包安装Percona XtraBacku ...
- app 压力测试
monkey工具详解 https://blog.csdn.net/jffhy2017/article/details/54572400 ----------------------- Android ...
- vue-10-路由
1 原始方式 1), 路由, vue-router 2 简单安装方式, 但先讲原理 cnpm install --save vue-router 2), 引用 在main.js中 // 引入 rout ...
- python中执行该文件,就调用 mian 方法
代码: test.py import student def main(): st = student.student(1001, 'tommy', 18) st.sing() st.dance() ...
- springboot情操陶冶-SpringApplication(二)
承接前文springboot情操陶冶-SpringApplication(一),本文将对run()方法作下详细的解析 SpringApplication#run() main函数经常调用的run()方 ...
- RabbitMQ系列(三)RabbitMQ交换器Exchange介绍与实践
RabbitMQ交换器Exchange介绍与实践 RabbitMQ系列文章 RabbitMQ在Ubuntu上的环境搭建 深入了解RabbitMQ工作原理及简单使用 RabbitMQ交换器Exchang ...
- java基础系列--volatile关键字
原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/7833881.html 1.volatile简述 据说,volatile是java语言中最轻 ...
- sed修炼系列(二):sed武功心法(info sed翻译+注解)
sed系列文章: sed修炼系列(一):花拳绣腿之入门篇sed修炼系列(二):武功心法(info sed翻译+注解)sed修炼系列(三):sed高级应用之实现窗口滑动技术sed修炼系列(四):sed中 ...
- Perl的do语句块结构
do语句块结构如下: do {...} do语句块像是匿名子程序一样,没有名称,给定一个语句块,直接执行.且和子程序一样,do语句块的返回值都是最后一个执行的语句的返回值. 例如,将使用if-elsi ...
- 被遗忘的C结构体打包技术
今天看到的一篇文章,记录一下:https://github.com/ludx/The-Lost-Art-of-C-Structure-Packing 失传的C结构体打包技艺 作者:Eric S. Ra ...