js实现异步循环实现代码


Posted in Javascript onFebruary 16, 2016

问题
实现异步循环时,你可能会遇到问题。

让我们试着写一个异步方法,一次循环打印一次循环的索引值。

<script>
for(var i = 0; i < 5; i++){
setTimeout(function(){
document.writeln(i);document.writeln("<br />");
},1000);
}
</script>

如上程序的输出为:

5
5
5
5
5

原因

每次时间结束(timeout)都指向原始的i,而并非它的拷贝。所以,for循环使i增长到5,之后timeout运行并调用了当前i的值(也就是5)。

解决方法

有几个不同的方式可以拷贝i。最普通且常用方法是通过声明函数来建立一个闭包,并将i传给此函数。我们这里使用了自调用函数。

运行代码

<script>
for(var i = 0; i < 5; i++){
(function(num){
setTimeout(function(){
document.writeln(num);document.writeln("<br />");
},1000);
})(i);
}
</script>

输出

0
1
2
3
4

Javascript 相关文章推荐
[HTML/CSS/Javascript]WWTJS
Sep 25 Javascript
一句话JavaScript表单验证代码
Aug 02 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
Mar 31 Javascript
php 中序列化和json使用介绍
Jul 08 Javascript
jQuery中last()方法用法实例
Jan 06 Javascript
Javascript中的神器——Promise
Feb 08 Javascript
Material(包括Material Icon)在Angular2中的使用详解
Feb 11 Javascript
vue组件中的数据传递方法
May 14 Javascript
JS实现模糊查询带下拉匹配效果
Jun 21 Javascript
详解vue中this.$emit()的返回值是什么
Apr 07 Javascript
Vue开发环境中修改端口号的实现方法
Aug 15 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
Jun 01 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
Feb 16 #Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
Feb 16 #Javascript
javascript HTML+CSS实现经典橙色导航菜单
Feb 16 #Javascript
JavaScript中使用数组方法汇总
Feb 16 #Javascript
jquery拖拽排序简单实现方法(效果增强版)
Feb 16 #Javascript
jquery实现具有收缩功能的垂直导航菜单
Feb 16 #Javascript
学习使用AngularJS文件上传控件
Feb 16 #Javascript
You might like
用session做客户验证时的注意事项
2006/10/09 PHP
PHP错误抑制符(@)导致引用传参失败Bug的分析
2011/05/02 PHP
PHP抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
PHP5.5迭代生成器用法实例详解
2016/03/16 PHP
列表内容的选择
2006/06/30 Javascript
SlideView 图片滑动(扩展/收缩)展示效果
2010/08/01 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
javascript基于prototype实现类似OOP继承的方法
2015/12/16 Javascript
javascript实现全角转半角的方法
2016/01/23 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
2017/03/01 Javascript
AngularJS监听路由变化的方法
2017/03/07 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
2018/07/01 Javascript
Vue中Axios从远程/后台读取数据
2019/01/21 Javascript
layui 实现表单和文件上传一起传到后台的例子
2019/09/16 Javascript
layui默认选中table的CheckBox复选框方法
2019/09/19 Javascript
微信小程序定义和调用全局变量globalData的实现
2019/11/01 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
原生JS实现京东查看商品点击放大
2020/12/21 Javascript
利用python实现微信头像加红色数字功能
2018/03/26 Python
python实现图片文件批量重命名
2020/03/23 Python
Python Django Vue 项目创建过程详解
2019/07/29 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
Python操作redis和mongoDB的方法
2019/12/19 Python
Python常用模块函数代码汇总解析
2020/08/31 Python
Python3 pyecharts生成Html文件柱状图及折线图代码实例
2020/09/29 Python
快速解决pymongo操作mongodb的时区问题
2020/12/05 Python
5个你不知道的HTML5的接口介绍
2013/08/07 HTML / CSS
加拿大当代时尚服饰、配饰和鞋类专业零售商和制造商:LE CHÂTEAU
2017/10/06 全球购物
Clos19英国:高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
面向对象编程的优势是什么
2015/12/17 面试题
UNIX文件类型
2013/08/29 面试题
小学生学习雷锋倡议书
2014/05/15 职场文书
干部培训工作总结2015
2015/05/25 职场文书
入党积极分子群众意见
2015/06/01 职场文书
反四风问题学习心得体会
2016/01/22 职场文书
Python&Matlab实现樱花的绘制
2022/04/07 Python