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 相关文章推荐
一款js和css代码压缩工具[附JAVA环境配置方法]
Apr 16 Javascript
Angularjs基础知识及示例汇总
Jan 22 Javascript
javascript自定义右键弹出菜单实现方法
May 25 Javascript
jQuery动态星级评分效果实现方法
Aug 06 Javascript
jQuery平滑旋转幻灯片特效代码分享
Sep 07 Javascript
超精准的javascript验证身份证号的具体实现方法
Nov 18 Javascript
BootStrap实现树形目录组件代码详解
Jun 21 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
Jun 30 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
Dec 30 Javascript
vue使用axios跨域请求数据问题详解
Oct 18 Javascript
如何在JavaScript中谨慎使用代码注释
Jun 21 Javascript
javascript实现雪花飘落效果
Aug 19 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
ThinkPHP的L方法使用简介
2014/06/18 PHP
PHP读取配置文件类实例(可读取ini,yaml,xml等)
2015/07/28 PHP
面向对象的Javascript之三(封装和信息隐藏)
2012/01/27 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
JS字符串拼接在ie中都报错的解决方法
2014/03/27 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
2014/08/10 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
一个php+js实时显示时间问题
2015/10/12 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
2015/10/28 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
2015/11/13 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
2016/02/15 Javascript
Nodejs中的this详解
2016/03/26 NodeJs
微信小程序slider组件使用详解
2018/01/31 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
详解JavaScript添加给定的标签选项
2018/09/17 Javascript
webpack的pitching loader详解
2019/09/23 Javascript
微信小程序实现分页加载效果
2020/11/19 Javascript
探究Python多进程编程下线程之间变量的共享问题
2015/05/05 Python
python中urlparse模块介绍与使用示例
2017/11/19 Python
python微信跳一跳游戏辅助代码解析
2018/01/29 Python
对Python正则匹配IP、Url、Mail的方法详解
2018/12/25 Python
Python简单基础小程序的实例代码
2019/04/28 Python
如何在sublime编辑器中安装python
2020/05/20 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
python 删除系统中的文件(按时间,大小,扩展名)
2020/11/19 Python
Python爬取网站图片并保存的实现示例
2021/02/26 Python
Html5实现iPhone开机界面示例代码
2013/06/30 HTML / CSS
美国知名珠宝首饰品牌:Gemvara
2017/10/06 全球购物
工程班组长岗位职责
2013/12/30 职场文书
销售经理岗位职责
2014/03/16 职场文书
数学教研活动总结
2014/07/02 职场文书
个人工作保证书
2015/02/28 职场文书
2015年幼儿园卫生保健工作总结
2015/05/12 职场文书
七年级之开学家长寄语35句
2019/09/05 职场文书
导游词之苏州寒山寺
2019/12/05 职场文书
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android