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 相关文章推荐
解析JavaScript中的不可见数据类型
Dec 02 Javascript
js事件监听器用法实例详解
Jun 01 Javascript
全面介绍javascript实用技巧及单竖杠
Jul 18 Javascript
js判断所有表单项不为空则提交表单的实现方法
Sep 09 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
Dec 28 Javascript
详解Vue中状态管理Vuex
May 11 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
Jan 02 Javascript
js经验分享 JavaScript反调试技巧
Mar 10 Javascript
关于vue面试题汇总
Mar 20 Javascript
js监听html页面的上下滚动事件方法
Sep 11 Javascript
函数式编程入门实践(一)
Apr 20 Javascript
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
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
wamp安装后自定义配置的方法
2014/08/23 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
PHP实现微信申请退款功能
2018/10/01 PHP
让插入到 innerHTML 中的 script 跑起来的实现代码
2006/07/01 Javascript
jquery api参考 visualjquery 中国线路 速度快
2007/11/30 Javascript
JavaScript的9个陷阱及评点分析
2008/05/16 Javascript
JavaScript实现快速排序(自已编写)
2012/12/19 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
2013/04/26 Javascript
jQuery读取和设定KindEditor值的方法
2013/11/22 Javascript
JavaScript事件委托的技术原理探讨示例
2014/04/17 Javascript
JavaScript中合并数组的N种方法
2014/09/16 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
2016/05/12 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
2017/12/14 Javascript
微信小程序实现折叠与展开文章功能
2018/06/12 Javascript
详解webpack+ES6+Sass搭建多页面应用
2018/11/05 Javascript
详解Vue项目中实现锚点定位
2019/04/24 Javascript
富文本编辑器vue2-editor实现全屏功能
2019/05/26 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
2019/05/31 Javascript
基于JavaScript实现表格隔行换色
2020/05/08 Javascript
Vue组件通信$attrs、$listeners实现原理解析
2020/09/03 Javascript
Vue路由权限控制解析
2020/11/09 Javascript
列举Python中吸引人的一些特性
2015/04/09 Python
Python引用传值概念与用法实例小结
2017/10/07 Python
pytorch构建网络模型的4种方法
2018/04/13 Python
通过pycharm使用git的步骤(图文详解)
2019/06/13 Python
python如何快速生成时间戳
2020/07/21 Python
Python3爬虫带上cookie的实例代码
2020/07/28 Python
HTML5中的音频和视频媒体播放元素小结
2016/01/29 HTML / CSS
英国Flybe航空官网:欧洲最大的独立支线廉价航空公司
2019/07/15 全球购物
技术副厂长岗位职责
2013/12/26 职场文书
简单的大学生自我鉴定
2014/02/18 职场文书
2014年征兵标语
2014/06/20 职场文书
介绍信样本
2015/01/31 职场文书
2015年世界水日活动总结
2015/02/09 职场文书
《夹竹桃》教学反思
2016/02/23 职场文书
关于公司年会的开幕词
2016/03/04 职场文书