js实现异步循环实现代码
更新时间：2016年02月16日 14:47:44 投稿：mdxy-dxy
这篇文章主要介绍了js实现异步循环实现代码,需要的朋友可以参考下
问题
实现异步循环时，你可能会遇到问题。
让我们试着写一个异步方法，一次循环打印一次循环的索引值。
<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
您可能感兴趣的文章:
相关文章
在页面中放入一个DropDownList控件，并添加一项，用来分析其产生的HTML代码，这样在使用js进行动态控制时，将会非常清晰2014-09-09
这篇文章主要介绍了js实现有时间限制消失的图片方法,实例分析了javascript操作setTimeout及图片特效操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了使用Webpack构建多页面程序的实现步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
JavaScript 利用StringBuffer类提升+=拼接字符串效率
JavaScript 利用StringBuffer类提升+=拼接字符串效率，需要的朋友可以参考下。2009-11-11
操作符~， 是按位取反的意思，表面上~~（取反再取反）没有意义，下面有个不错的示例，大家可以参考下2014-04-04
这篇文章主要介绍了JS数组降维的几种方法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-04-04
这篇文章主要介绍了js中的如何定位固定层的位置,需要的朋友可以参考下2014-06-06
本文通过js和cas代码分别给大家介绍了移动端判断手机横竖屏状态的相关知识，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2018-07-07
这篇文章主要介绍了js简单实现Select互换数据的方法,涉及javascript动态操作select中option节点的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
这篇文章主要为大家详细介绍了uniapp自定义弹框的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
最新评论