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 相关文章推荐
jquery pagination插件实现无刷新分页代码
Oct 13 Javascript
浅谈页面装载js及性能分析方法
Dec 09 Javascript
javascript实现一个简单的弹出窗
Feb 22 Javascript
jQuery 3.0中存在问题及解决办法
Jul 15 Javascript
简单实现js倒计时功能
Feb 13 Javascript
JavaScript实现选中文字提示新浪微博分享效果
Jun 15 Javascript
通过js控制时间,一秒一秒自己动的实例
Oct 25 Javascript
判断“命令按钮”是否被鼠标单击详解
Jul 31 Javascript
原生javascript自定义input[type=radio]效果示例
Aug 27 Javascript
js通过循环多张图片实现动画效果
Dec 19 Javascript
微信小程序停止其他视频播放当前视频的实例代码
Dec 25 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
Feb 12 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/01/12 PHP
thinkphp配置连接数据库技巧
2014/12/02 PHP
jquery实现控制表格行高亮实例
2013/06/05 Javascript
jquery eval解析JSON中的注意点介绍
2013/08/23 Javascript
JavaScript实现简单图片滚动附源码下载
2014/06/17 Javascript
Bootstrap的图片轮播示例代码
2015/08/31 Javascript
深入理解MVC中的时间js格式化
2016/05/19 Javascript
JS实现获取当前URL和来源URL的方法
2016/08/24 Javascript
原生js的RSA和AES加密解密算法
2016/10/08 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
2016/10/17 Javascript
bootstrap监听滚动实现头部跟随滚动
2016/11/08 Javascript
React-Native使用Mobx实现购物车功能
2017/09/14 Javascript
vue watch自动检测数据变化实时渲染的方法
2018/01/16 Javascript
Vue登录注册并保持登录状态的方法
2018/08/17 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
2019/04/11 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
2019/05/02 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
2020/03/06 Javascript
python实现批量转换文件编码(批转换编码示例)
2014/01/23 Python
python 输出上个月的月末日期实例
2018/04/11 Python
python实现反转部分单向链表
2018/09/27 Python
python取数作为临时极大值(极小值)的方法
2018/10/15 Python
Python3.6使用tesseract-ocr的正确方法
2018/10/17 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
Python Opencv实现图像轮廓识别功能
2020/03/23 Python
python模拟哔哩哔哩滑块登入验证的实现
2020/04/24 Python
在CentOS7下安装Python3教程解析
2020/07/09 Python
CSS3教程:background-clip和background-origin
2008/10/17 HTML / CSS
Moss Bros官网:英国排名第一的西装店
2020/02/26 全球购物
自荐信格式写作方法有哪些呢
2013/11/20 职场文书
大专会计自我鉴定
2014/02/06 职场文书
党校个人自我鉴定范文
2014/03/28 职场文书
党组织公开承诺书
2014/03/29 职场文书
暑期实践个人总结
2015/03/06 职场文书
2019银行竞聘书
2019/06/21 职场文书
python geopandas读取、创建shapefile文件的方法
2021/06/29 Python
POST提交数据常见的四种方式
2022/01/18 HTML / CSS