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中null与undefined分析
Jul 25 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
Sep 01 Javascript
分享使用AngularJS创建应用的5个框架
Dec 05 Javascript
ajax在兼容模式下失效的快速解决方法
Mar 22 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
Aug 05 Javascript
jquery 动态增加删除行的简单实例(推荐)
Oct 12 Javascript
JS控制TreeView的结点选择
Nov 11 Javascript
通过AngularJS实现图片上传及缩略图展示示例
Jan 03 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
Vee-Validate的使用方法详解
Sep 22 Javascript
js+html5生成自动排列对话框实例
Oct 09 Javascript
vue使用laydate时间插件的方法
Nov 14 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
php在多维数组中根据键名快速查询其父键以及父键值的代码
2011/05/07 PHP
30 个很棒的PHP开源CMS内容管理系统小结
2011/10/14 PHP
深入理解JavaScript系列(2) 揭秘命名函数表达式
2012/01/15 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
2012/01/15 Javascript
jquery 插件学习(五)
2012/08/06 Javascript
Javascript 赋值机制详解
2014/11/23 Javascript
javascript中indexOf技术详解
2015/05/07 Javascript
谈谈jQuery Ajax用法详解
2015/11/27 Javascript
不定义JQuery插件 不要说会JQuery
2016/03/07 Javascript
浅谈js中的三种继承方式及其优缺点
2016/08/10 Javascript
JS实现的Unicode编码转换操作示例
2017/04/28 Javascript
vue使用Axios做ajax请求详解
2017/06/07 Javascript
Vue-Router2.X多种路由实现方式总结
2018/02/09 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
2019/10/08 jQuery
JS获取当前时间的年月日时分秒及时间的格式化的方法
2019/12/18 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
2020/03/17 Javascript
python实现rest请求api示例
2014/04/22 Python
Python程序设计入门(5)类的使用简介
2014/06/16 Python
Python实现获取操作系统版本信息方法
2015/04/08 Python
在Python的Flask框架中实现单元测试的教程
2015/04/20 Python
Python使用minidom读写xml的方法
2015/06/03 Python
Python中atexit模块的基本使用示例
2015/07/08 Python
python 以16进制打印输出的方法
2018/07/09 Python
对python中的iter()函数与next()函数详解
2018/10/18 Python
PyQt5组件读取参数的实例
2019/06/25 Python
英国时尚和家居用品零售商:Matalan
2021/02/28 全球购物
文化与传播毕业生求职信
2014/03/09 职场文书
环保建议书600字
2014/05/14 职场文书
护士节演讲稿开场白
2014/08/25 职场文书
城管执法人员个人对照检查材料思想汇报
2014/09/29 职场文书
解除劳动关系协议书2篇
2014/11/28 职场文书
期末个人总结范文
2015/02/13 职场文书
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript
nginx日志格式分析和修改
2022/04/28 Servers
Spring Boot 实现 WebSocket
2022/04/30 Java/Android