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 firefox不显示本地预览图片问题的解决方法
Nov 12 Javascript
javascript 模拟JQuery的Ready方法实现并出现的问题
Dec 06 Javascript
自己封装的常用javascript函数分享
Jan 07 Javascript
js获取微信版本号的方法
May 12 Javascript
vue-loader教程介绍
Jun 14 Javascript
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
浅谈vue的props,data,computed变化对组件更新的影响
Jan 16 Javascript
获取layer.open弹出层的返回值方法
Aug 20 Javascript
原生JS实现的放大镜特效示例【测试可用】
Dec 08 Javascript
微信小程序城市选择及搜索功能的方法
Mar 22 Javascript
jquery将json转为数据字典的实例代码
Oct 11 jQuery
js数组的基本使用总结
Jan 18 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
如何设置mysql允许外网访问
2013/06/04 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
php封装的表单验证类完整实例
2016/10/19 PHP
thinkPHP模板引擎用法示例
2016/12/08 PHP
Thinkphp 框架扩展之标签库驱动原理与用法分析
2020/04/23 PHP
JavaScript 数组的 uniq 方法
2008/01/23 Javascript
Javascript的闭包
2009/12/31 Javascript
Javascript面向对象设计一 工厂模式
2011/12/20 Javascript
面向对象的Javascript之一(初识Javascript)
2012/01/20 Javascript
js中传递特殊字符(+,&amp;)的方法
2014/01/16 Javascript
jQuery中get和post方法传值测试及注意事项
2014/08/08 Javascript
基于NodeJS的前后端分离的思考与实践(二)模版探索
2014/09/26 NodeJs
JQuery中使用on方法绑定hover事件实例
2014/12/09 Javascript
有关Promises异步问题详解
2015/11/13 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
2016/09/20 Javascript
jquery与ajax获取特殊字符实例详解
2017/01/08 Javascript
javaScript中的空值和假值
2017/12/18 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
2018/01/09 Javascript
express+vue+mongodb+session 实现注册登录功能
2018/12/06 Javascript
微信小程序中如何使用flyio封装网络请求
2019/07/03 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
2019/08/09 Javascript
解决python3爬虫无法显示中文的问题
2018/04/12 Python
Python装饰器用法实例总结
2018/05/26 Python
Python中存取文件的4种不同操作
2018/07/02 Python
Python告诉你木马程序的键盘记录原理
2019/02/02 Python
Python地图绘制实操详解
2019/03/04 Python
把JSON数据格式转换为Python的类对象方法详解(两种方法)
2019/06/04 Python
Django 1.10以上版本 url 配置注意事项详解
2019/08/05 Python
上海奥佳笔试题面试题
2016/11/16 面试题
ktv中秋节活动方案
2014/01/30 职场文书
ktv筹备计划书
2014/05/03 职场文书
管理标语大全
2014/06/24 职场文书
《作风建设永远在路上》心得体会
2016/01/21 职场文书
sqlserver连接错误之SQL评估期已过的问题解决
2022/03/23 SQL Server
PHP RabbitMQ消息列队
2022/05/11 PHP
Java多线程并发FutureTask使用详解
2022/06/28 Java/Android