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 相关文章推荐
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
Jun 01 Javascript
基于jquery DOM写的类似微博发布的效果
Oct 20 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
Oct 21 Javascript
JavaScript实现水平进度条拖拽效果
Jan 18 Javascript
Vue中添加过渡效果的方法
Mar 16 Javascript
使用async-validator编写Form组件的方法
Jan 10 Javascript
vue中的router-view组件的使用教程
Oct 23 Javascript
微信头像地址失效踩坑记附带解决方案
Sep 23 Javascript
vue根据条件不同显示不同按钮的操作
Aug 04 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
Sep 01 Javascript
es5 类与es6中class的区别小结
Nov 09 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/02/27 无线电
PHP实现压缩图片尺寸并转为jpg格式的方法示例
2018/05/10 PHP
拖动Html元素集合 Drag and Drop any item
2006/12/22 Javascript
对YUI扩展的Gird组件 Part-1
2007/03/10 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
2013/09/25 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
2013/11/19 Javascript
js 上下左右键控制焦点(示例代码)
2013/12/14 Javascript
jquery.cookie用法详细解析
2013/12/18 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
2014/02/21 Javascript
javascript删除一个html元素节点的方法
2014/12/20 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
浅谈javascript中的Function和Arguments
2016/08/30 Javascript
javascript中异常处理案例(推荐)
2016/10/03 Javascript
bootstrap监听滚动实现头部跟随滚动
2016/11/08 Javascript
react-native之ART绘图方法详解
2017/08/08 Javascript
vue 父组件调用子组件方法及事件
2018/03/29 Javascript
vue中的计算属性实例详解
2018/09/19 Javascript
js中Generator函数的深入讲解
2019/04/07 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
2019/05/13 Javascript
微信小程序使用蓝牙小插件
2019/09/23 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
vue项目打包后请求地址错误/打包后跨域操作
2020/11/04 Javascript
Vue router安装及使用方法解析
2020/12/02 Vue.js
vue编写简单的购物车功能
2021/01/08 Vue.js
python使用xmlrpc实例讲解
2013/12/17 Python
Python ORM框架SQLAlchemy学习笔记之数据查询实例
2014/06/10 Python
Python实现统计给定列表中指定数字出现次数的方法
2018/04/11 Python
用Python去除图像的黑色或白色背景实例
2019/12/12 Python
使用python matploblib库绘制准确率,损失率折线图
2020/06/16 Python
什么是数组名
2012/05/10 面试题
2013的个人自我评价
2013/12/26 职场文书
网站美工岗位职责
2014/04/02 职场文书
明信片寄语大全
2014/04/08 职场文书
幼儿教师师德师风自我评价
2015/03/05 职场文书
学校德育工作总结2015
2015/05/11 职场文书
元旦晚会主持词开场白
2015/05/28 职场文书