Javascript的setTimeout()使用闭包特性时需要注意的问题


Posted in Javascript onSeptember 23, 2014

setTimeout经常被用于延迟执行某个函数,用法为:

setTimeout(function(){

…

}, timeout);

有时为了进行异步处理,而使用setTimeout(function…,0);比如:

function f(){

… // get ready

setTimeout(function(){

…. // do something

}, 0);

  

return …;

}

 在setTimeout设定的函数处理器之前,函数f返回;

在使用异步处理时,尤其是使用闭包特性时,要特别小心;

例如:

for(var i = 0 ; i < 10; i++){

setTimeout(function(){

console.log(i);

}, 0);

}

对于初次使用这种方式的同学来说,很可能会认为程序会打印0…9,可结果确实打印10个10;
问题就在于,当循环完成时,function得到执行,而i已经变成10,console.log(i)中使用的是10!
 
加入你的目的是打印0…9,那么可以换一种方式,用函数参数来保存0….9(其实也是利用了闭包):

for(var i = 0 ; i < 10; i++){

setTimeout((function(i){

return function(){

console.log(i);

}

})(i), 0);

}
Javascript 相关文章推荐
2007/12/23更新创意无限,简单实用(javascript log)
Dec 24 Javascript
数组Array进行原型prototype扩展后带来的for in遍历问题
Feb 07 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 06 Javascript
一个不错的js html页面倒计时可精确到秒
Oct 22 Javascript
JS获取数组最大值、最小值及长度的方法
Nov 24 Javascript
JavaScript的Number对象的toString()方法
Dec 18 Javascript
分享两款带遮罩的jQuery弹出框
Dec 30 Javascript
Vue中render函数的使用方法
Jan 31 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
Sep 04 Javascript
Vue表单控件绑定图文详解
Feb 11 Javascript
微信小程序canvas绘制圆角base64图片的实现
Aug 18 Javascript
JavaScript实现简单计时器
Jun 22 Javascript
IE6 hack for js 集锦
Sep 23 #Javascript
深入理解javascript作用域和闭包
Sep 23 #Javascript
js变量、作用域及内存详解
Sep 23 #Javascript
js单独获取一个checkbox看其是否被选中
Sep 22 #Javascript
多个checkbox被选中时如何判断是否有自己想要的
Sep 22 #Javascript
js css 实现遮罩层覆盖其他页面元素附图
Sep 22 #Javascript
基于jquery的文字向上跑动类似跑马灯的效果
Sep 22 #Javascript
You might like
用文本作数据处理
2006/10/09 PHP
PHP 常用数组内部函数(Array Functions)介绍
2013/06/05 PHP
PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁
2014/06/09 PHP
Chrome Web App开发小结
2014/09/04 PHP
Symfony页面的基本创建实例详解
2015/01/26 PHP
微信网页授权(OAuth2.0) PHP 源码简单实现
2016/08/29 PHP
JavaScript的类型转换(字符转数字 数字转字符)
2010/08/30 Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
2013/04/26 Javascript
用javascript为页面添加天气显示实现思路及代码
2013/12/02 Javascript
jquery使用jxl插件导出excel示例
2014/04/14 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
2014/07/08 Javascript
jQuery的css() 方法使用指南
2015/05/03 Javascript
jquery实现简单的二级导航下拉菜单效果
2015/09/07 Javascript
直接拿来用的15个jQuery代码片段
2015/09/23 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
2016/08/01 Javascript
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
JavaScript输入分钟、秒倒计时技巧总结(附代码)
2017/08/17 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
2017/08/28 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
[55:04]海涛DOTA2死魂复燃6.82版本介绍
2014/09/28 DOTA
Atom的python插件和常用插件说明
2018/07/08 Python
Python分支语句与循环语句应用实例分析
2019/05/07 Python
Python代理IP爬虫的新手使用教程
2019/09/05 Python
TensorFlow绘制loss/accuracy曲线的实例
2020/01/21 Python
Python插件机制实现详解
2020/05/04 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
加拿大国民体育购物网站:National Sports
2018/11/04 全球购物
新法人代表任命书
2014/06/06 职场文书
市场调研项目授权委托书范本
2014/10/04 职场文书
家长通知书家长意见
2014/12/30 职场文书
2016年“12.4”法制宣传日活动总结
2016/04/01 职场文书
Python3 使用pip安装git并获取Yahoo金融数据的操作
2021/04/08 Python
Linux7.6二进制安装Mysql8.0.27详细操作步骤
2021/11/27 MySQL
httpclient调用远程接口的方法
2022/08/14 Java/Android
JS实现页面炫酷的时钟特效示例
2022/08/14 Javascript