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 相关文章推荐
获取客户端网卡MAC地址和IP地址实现JS代码
Mar 17 Javascript
将Datatable转化成json发送前台实现思路
Sep 06 Javascript
js中使用replace方法完成某个字符的转换
Aug 20 Javascript
JavaScript调试工具汇总
Dec 23 Javascript
原生Js实现简易烟花爆炸效果的方法
Mar 20 Javascript
详解JavaScript的while循环的使用
Jun 03 Javascript
js基于setTimeout与setInterval实现多线程
Jun 17 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
Nov 21 Javascript
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
node thread.sleep实现示例
Jun 20 Javascript
vue实现购物车的监听
Apr 20 Javascript
JavaScript enum枚举类型定义及使用方法
May 15 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
咖啡机如何保养和日常清洁?
2021/03/03 冲泡冲煮
PHP文件读写操作之文件写入代码
2011/01/13 PHP
Yii2隐藏frontend/web和backend/web的方法
2015/12/12 PHP
Mozilla 表达式 __noSuchMethod__
2009/04/05 Javascript
JavaScript Event学习第七章 事件属性
2010/02/07 Javascript
javascript之学会吝啬 精简代码
2010/04/25 Javascript
基于JQuery实现异步刷新的代码(转载)
2011/03/29 Javascript
关于jQuery UI 使用心得及技巧
2012/10/10 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
2013/05/30 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
2014/01/11 Javascript
javascript实现json页面分页实例代码
2014/02/20 Javascript
JS实现鼠标单击与双击事件共存
2014/03/08 Javascript
jquery中each方法示例和常用选择器
2014/07/08 Javascript
jquery删除数组中重复元素
2016/12/05 Javascript
vue中rem的配置的方法示例
2018/08/30 Javascript
Vue.js实现可排序的表格组件功能示例
2019/02/19 Javascript
前端Vue项目详解--初始化及导航栏
2019/06/24 Javascript
JavaScript中如何调用Java方法
2020/09/16 Javascript
Python中用memcached来减少数据库查询次数的教程
2015/04/07 Python
编写Python脚本来实现最简单的FTP下载的教程
2015/05/04 Python
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
10分钟教你用python动画演示深度优先算法搜寻逃出迷宫的路径
2019/08/12 Python
python系列 文件操作的代码
2019/10/06 Python
python文件读写代码实例
2019/10/21 Python
用Python去除图像的黑色或白色背景实例
2019/12/12 Python
python 子类调用父类的构造函数实例
2020/03/12 Python
Python爬虫抓取指定网页图片代码实例
2020/07/24 Python
HTML5 3D衣服摇摆动画特效
2016/03/17 HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
2020/08/19 HTML / CSS
EJB实例的生命周期
2016/10/28 面试题
小学生评语大全
2014/04/18 职场文书
教师见习期自我鉴定
2014/04/28 职场文书
教师学期末个人总结
2015/02/13 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
公司要求试用期员工提交“述职报告”,该怎么写?
2019/07/17 职场文书
CSS list-style-type属性使用方法
2023/05/21 HTML / CSS