当setTimeout遇到闭包
1:
function myTest(){
for(var i=0; i< 5; i++){
setTimeout(console.log(i), 0);
}
}
myTest();
或者比较正规的写法(code 加上引号):
function myTest(){
for(var i=0; i< 5; i++){
setTimeout("console.log(" + i + ")", 0);
}
}
myTest();
控制台输出结果为 0,1,2,3,4
2:
function myTest(){
for(var i=0; i< 5; i++){
setTimeout(function(){
console.log(i);
}, 0);
}
}
myTest();
控制台输出结果为 5,5,5,5,5
虽然setTimeout(code, 0)为立即执行,但由于javascript为单线程,所以还需等待循环结束后才会执行setTimeout
由于阻塞,在循环中产生的setTimeout事件会被放在执行队列中进行等待。
1中放入执行队列的是:console.log(i) ,结果为 0,1,2,3,4
2中放入执行队列的是:function(){ console.log(i); }, 结果为 5,5,5,5,5 为什么呢
原因:2放入队列的是匿名函数,等到匿名函数执行的时候,变量i已经累加到5了
有时,需要执行的代码不仅仅一句console.log(i)这么简单,那么2中要怎么才能做到输出 0,1,2,3,4
这里就讲到闭包:
内部函数可以使用外部的变量。
既然i为外部变量已经不可控,那就对i下手吧
修改如下:
function myTest(){
for(var i=0; i< 5; i++){
(function(v){
setTimeout(function(){
console.log(v)
}, 1000);
})(i); }
}
myTest();
每次循环先把立即(function(v){...})(i);把i作为参数传入闭包,就不会对变量造成污染。
当setTimeout遇到闭包的更多相关文章
- setTimeout 学习闭包
@(技术笔记)[css] 学习参考网站 css 网站,可供参考 javascript学习网站 var create = function (i){ return function(){ console ...
- setTimeout使用闭包功能,实现定时打印数值
我们这次使用setTimeout来实现一个按照时间定时,依次打印数值的例子.其实在早期的时候,也是我经常犯的一个错误,或者实现这种能力,似乎js比较牵强,其实是我的错,哈哈!没能理解JS强大之处.我们 ...
- setTimeout 与 闭包。。。
先看下面一个比较坑的代码 for (var i=1; i<=5; i++) { setTimeout( function timer() { console.log(i); }, i*1000 ...
- setTimeOut和闭包
掘金上看到一个setTimeout与循环闭包的思考题.拿过来看了下,一方面了解settimeout的运行机制,还有就是js闭包的特性.关于闭包,有如下解释: 在这里写一点我对闭包的理解.理解闭包的关键 ...
- 由一道面试题简单扩展 — setTimeout、闭包
在一个前端公众号,看到这么一个号称简单的面试题: 1.以下程序输出什么? <script type="text/javascript"> function init() ...
- 附件1:setTimeout与闭包
我在详细图解作用域链与闭包一文中的结尾留下了一个关于setTimeout与循环闭包的思考题. 利用闭包,修改下面的代码,让循环输出的结果依次为1, 2, 3, 4, 5 for (var i=1; i ...
- js闭包(三)
场景一:采用函数引用方式的setTimeout调用 闭包的一个通常的用法是为一个在某一函数执行前先执行的函数提供参数.例如,在web环境中,一个函数作为setTimeout函数调用的第一个参数,是一种 ...
- Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
- 菜鸟凉经(华为、firehome、大华)
面试通知都是前一天来的,准备的时间很少,所以表现也不是特别满意,来看面经吧: 华为一面(IT应用工程师): 1.自我介绍:(华为面试都是1对1,面前的是个温柔的小哥,挺放松的) 2.你主要会的it技术 ...
随机推荐
- 你好,C++(29)脚踏两只船的函数不是好函数 5.4 函数设计的基本规则
5.4 函数设计的基本规则 函数是C++程序的基本功能单元,就像一块块砖头可以有规则地垒成一座房子,而一个个函数也可以有规则地组织成一个程序.我们在大量使用他人设计好的函数的同时,也在设计大量的函数 ...
- HTTP状态码:400\500 错误代码
一些常见的状态码为: 200 - 服务器成功返回网页404 - 请求的网页不存在503 - 服务不可用详细分解: 1xx(临时响应)表示临时响应并需要请求者继续执行操作的状态代码. 代码 说明100 ...
- FlowPlayer 参数说明
<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> & ...
- Linux定时任务crontab命令使用详解
1.crontab功能介绍: crontab的功能是在一定的时间间隔内定时执行一些命令. 2.crontab参数详解: 1 crontab -u //设定某个用户的cron服务,一般root用户在执行 ...
- IE的有条件注释详解
IE的有条件注释是一种专有的(因此是非标准的).对常规(X)HTML注释的Miscrosoft扩展.顾名思义,有条件注释使你能够根据条件(比如浏览器版本)显示代码块.尽管是非标准的,但是有条件注释对于 ...
- 按钮点击效果jquery
<html><head> <meta charset="UTF-8"> <title>QQ</title> <me ...
- MySQL添加中文字符集问题 --- java.sql.SQLException: Incorrect string value
今天在做开关记录的时候,数据库表中description字段用于记录当前版本的描述(需要存储中文),在测试程序的时候发现如果用户输入中文,那么后台会报错.错误信息如下: java.sql.SQLExc ...
- Spark 启动过程(standalone)
Spark启动过程 正常启动Spark集群时往往使用start-all.sh ,此脚本中通过调用start-master.sh和start-slaves.sh启动mater及workers节点. 1. ...
- 防止ajax非正常访问
http://www.cnblogs.com/yagzh2000/archive/2013/06/09/3128042.html http://www.cnblogs.com/henw/archive ...
- layer iframe层的使用,传参
父层 <div class="col-xs-4 text-left" style="padding-left: 50px;"><button ...