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面向对象编程入门教程
Apr 16 Javascript
javascript 数组去重复(在线去重工具)
Dec 17 Javascript
微信小程序左右滑动的实现代码
Dec 15 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
Jan 15 Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
Oct 12 Javascript
简单实现vue中的依赖收集与响应的方法
Feb 18 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
Apr 17 Javascript
vue.js 子组件无法获取父组件store值的解决方式
Nov 08 Javascript
基于JS实现table导出Excel并保留样式
May 19 Javascript
js实现验证码功能
Jul 24 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
Aug 28 Javascript
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
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 number_format() 函数定义和用法
2012/06/01 PHP
设置php页面编码的两种方法示例介绍
2014/03/03 PHP
ThinkPHP设置禁止百度等搜索引擎转码(简单实用)
2016/02/15 PHP
PHP+Ajax验证码验证用户登录
2016/07/20 PHP
Windows下php+mysql5.7配置教程
2017/05/16 PHP
PHP实现生成推广海报的方法详解
2018/03/14 PHP
Laravel 使用查询构造器配合原生sql语句查询的例子
2019/10/12 PHP
理解Javascript_01_理解内存分配原理分析
2010/10/11 Javascript
js toFixed()方法的重写实现精度的统一
2014/03/06 Javascript
JavaScript制作windows经典扫雷小游戏
2015/03/31 Javascript
JavaScript实现带标题的图片轮播特效
2015/05/20 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
简单了解TypeScript中如何继承 Error 类
2019/06/21 Javascript
Vue form表单动态添加组件实战案例
2019/09/02 Javascript
JS自定义滚动条效果
2020/03/13 Javascript
vant中的toast层级改变操作
2020/11/04 Javascript
[52:52]完美世界DOTA2联赛PWL S3 LBZS vs access 第一场 12.10
2020/12/13 DOTA
解决python nohup linux 后台运行输出的问题
2018/05/11 Python
一百行python代码将图片转成字符画
2021/02/19 Python
python程序运行进程、使用时间、剩余时间显示功能的实现代码
2019/07/11 Python
jenkins+python自动化测试持续集成教程
2020/05/12 Python
python 决策树算法的实现
2020/10/09 Python
css3闪亮进度条效果实现思路及代码
2013/04/17 HTML / CSS
香港钟表珠宝首饰商城:OneMallTime网摩间
2016/10/14 全球购物
荷兰度假屋租赁网站:Aan Zee
2020/02/28 全球购物
教师专业理论水平的自我评价分享
2013/11/09 职场文书
宿舍卫生检讨书
2014/01/16 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书
整改通知书
2015/04/20 职场文书
民间借贷借条范本
2015/05/25 职场文书
电影小兵张嘎观后感
2015/06/03 职场文书
2016春节放假通知范文
2015/08/18 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书
Lombok的详细使用及优缺点总结
2021/07/15 Java/Android