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 从if else 到 switch case 再到抽象
Jul 17 Javascript
分享20款好玩的jQuery游戏
Apr 17 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
Sep 27 Javascript
javascript将数字转换整数金额大写的方法
Jan 27 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
Apr 22 Javascript
jquery控制显示服务器生成的图片流
Aug 04 Javascript
jQuery对象的链式操作用法分析
May 10 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
Jun 21 Javascript
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
移动端(微信等使用vConsole调试console的方法
Mar 05 Javascript
vue项目强制清除页面缓存的例子
Nov 06 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
Apr 17 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
DOTA2 探索永无止境 玩家自创强悍插眼攻略
2020/04/20 DOTA
PHP实现通过Luhn算法校验信用卡卡号是否有效
2015/03/23 PHP
typecho插件编写教程(二):写一个新插件
2015/05/28 PHP
Symfony的安装和配置方法
2016/03/17 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
PHP explode()函数用法讲解
2019/02/15 PHP
jquery radio 操作代码
2011/03/16 Javascript
关于Jquery操作Cookie取值错误的解决方法
2013/08/26 Javascript
Bootstrap布局组件应用实例讲解
2016/02/17 Javascript
详解JavaScript设计模式开发中的桥接模式使用
2016/05/18 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
2017/01/21 Javascript
react.js CMS 删除功能的实现方法
2017/04/17 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
2017/08/17 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
2017/10/19 Javascript
vue实现底部菜单功能
2018/07/24 Javascript
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
JavaScript命令模式原理与用法实例详解
2020/03/10 Javascript
JS 5种遍历对象的方式
2020/06/16 Javascript
Python对小数进行除法运算的正确方法示例
2014/08/25 Python
分享Python文本生成二维码实例
2016/01/06 Python
Python有序查找算法之二分法实例分析
2017/12/11 Python
django框架之cookie/session的使用示例(小结)
2018/10/15 Python
dataframe 按条件替换某一列中的值方法
2019/01/29 Python
浅谈Django中view对数据库的调用方法
2019/07/18 Python
IronPython连接MySQL的方法步骤
2019/12/27 Python
Python发送手机动态验证码代码实例
2020/02/28 Python
python学生管理系统的实现
2020/04/05 Python
详解html5 shiv.js和respond.min.js
2018/01/24 HTML / CSS
美国受信赖的教育产品供应商:Nest Learning
2018/06/14 全球购物
期末自我鉴定
2014/02/02 职场文书
大学生个人求职信例文
2014/07/07 职场文书
2014年大学宣传部工作总结
2014/12/19 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书
开学典礼校长致辞
2015/07/29 职场文书
基于Redis位图实现用户签到功能
2021/05/08 Redis
Oracle数据库事务的开启与结束详解
2022/06/25 Oracle