一道经典面试题-----setTimeout(function(){},0)
一道经典面试题-----setTimeout(function(){},0)
转载: http://www.w3cfuns.com/notes/17398/e8a1ce8f863e8b5abb530069b388a158/page/3.html#tagsbar
先看题:
for (var i = 0; i < 3; i++) {
setTimeout(function() {
console.log(i);
}, 0);
console.log(i);
}
结果是:0 1 2 3 3 3
很多公司面试都爱出这道题,此题考察的知识点还是蛮多的。
都考察了那些知识点呢?
异步、作用域、闭包。
我们来简化此题:
setTimeout(function() {
console.log(1);
}, 0);
console.log(2); //先打印2,再打印1
因为是setTimeout是异步的。
正确的理解setTimeout的方式(注册事件):
有两个参数,第一个参数是函数,第二参数是时间值。
调用setTimeout时,把函数参数,放到事件队列中。等主程序运行完,再调用。
就像我们给按钮绑定事件一样:
btn.onclick = function() {
alert(1);
};
这么写完,会弹出1吗。不会!!只是绑定事件而已! 必须等我们去触发事件,比如去点击这个按钮,才会弹出1。
setTimeout也是这样的!只是绑定事件,等主程序运行完毕后,再去调用。
setTimeout的时间值是怎么回事呢?
setTimeout(fn, 2000)
程序会不会报错? 不会!而且还会准确得打印1。为什么? 因为真正去执行console.log(i)这句代码时,var i = 1已经执行完毕了!
所以我们进行dom操作。可以先绑定事件,然后再去写其他逻辑。
window.onload = function() {
fn();
}
var fn = function() {
alert('hello')
};
这么写,完全是可以的。因为异步!
es5中是没有块级作用域的。
for (var i = 0; i < 3; i++) {}
console.log(i); //3,也就说i可以在for循环体外访问到。所以是没有块级作用域。
这回我们再来看看原题。
原题使用了for循环。循环的本质是干嘛的?
是为了方便我们程序员,少写重复代码。
原题等价于:
var i = 0;
setTimeout(function() {
console.log(i);
}, 0);
console.log(i);
i++;
setTimeout(function() {
console.log(i);
}, 0);
console.log(i);
i++;
setTimeout(function() {
console.log(i);
}, 0);
console.log(i);
i++;
因为setTimeout是注册事件。根据前面的讨论,可以都放在后面。
原题又等价于如下的写法:
var i = 0;
console.log(i);
i++;
console.log(i);
i++;
console.log(i);
i++;
setTimeout(function() {
console.log(i);
}, 0);
setTimeout(function() {
console.log(i);
}, 0);
setTimeout(function() {
console.log(i);
}, 0); //弹出 0 1 2 3 3 3
怎么保证能弹出0,1, 2呢?
for (var i = 0; i < 3; i++) {
setTimeout((function(i) {
return function() {
console.log(i);
};
})(i), 0); //改为立即执行的函数
console.log(i);
}
一道经典面试题-----setTimeout(function(){},0)的更多相关文章
- setTimeout(function(){}, 0);
for (var i = 0; i < 3; i++) { setTimeout(function() { console.log(i); }, 0); console.log(i); } 结果 ...
- 关于fork的一道经典面试题
这是一道面试题,问程序最终输出几个“-”: #include<stdio.h> #include<sys/types.h> #include<unistd.h> i ...
- 关于global和$GLOBALS[]的一道经典面试题
在不执行程序的情况下,你觉得的输出结果是什么? <?php $var1 = 1; $var2 = 2; function test(){ global $var1,$var2; $var2 = ...
- 一道经典面试题,atoi函数的实现
参考资料 (1)atoi函数的实现 (2)<剑指offer> 题目分析 本题需要注意的有几个方面: (1)检查输入参数,指针是否为NULL: (2)去除字符串前面的空格 (3)处理正负符号 ...
- java120经典面试题
经典面试题 -----version 1.0 题注:以下答案仅限本人个人见解,若有错误和建议请多多指教.QQ:1807812486 题目来源 1.什么是Java虚拟机?为什么Java被称作是" ...
- for(var i=1;i<=3;i++){ setTimeout(function(){ console.log(i); },0); };答案:4 4 4。
看面试题时,发现了一道较为经典的面试题,代码如下 for(var i=1;i<=3;i++){ setTimeout(function(){ console.log(i); },0); }; / ...
- 解析js中作用域、闭包——从一道经典的面试题开始
如何理解js中的作用域,闭包,私有变量,this对象概念呢? 就从一道经典的面试题开始吧! 题目:创建10个<a>标签,点击时候弹出相应的序号 先思考一下,再打开看看 //先思考一下你会怎 ...
- 一道经典JS面试题
超过80%的候选人对下面这道JS面试题的回答情况连及格都达不到.这究竟是怎样神奇的一道JS面试题?他考察了候选人的哪些能力?对正在读本文的你有什么启示? 不起眼的开始 招聘前端工程师,尤其是中高级前端 ...
- OpenJDK源码研究笔记(五)-缓存Integer等类型的频繁使用的数据和对象,大幅度提升性能(一道经典的Java笔试题)
摘要 本文先给出一个看似很简单实则有深意的Java笔试面试题,引出JDK内部的缓存. JDK内部的缓存,主要是为了提高Java程序的性能. 你能答对这道"看似简单,实则有深意"的J ...
随机推荐
- Python数据分析之pandas入门
一.pandas库简介 pandas是一个专门用于数据分析的开源Python库,目前很多使用Python分析数据的专业人员都将pandas作为基础工具来使用.pandas是以Numpy作为基础来设计开 ...
- oc for in遍历
在oc中用for in遍历可变数组时,不能修改删除新增元素,因为for in遍历是枚举遍历,在遍历的过程中不能修改容器里的值. NSMutableArray *arr=[NSMutableArray ...
- Java基础——GUI编程(二)
一.事件监听机制 -- 事件源:awt 或swing包中的那些图形界面组件,即发生事件的组件 -- 事件:Event 用户对组件的一个操作 -- 监听器:Listener 负责处理事件的方法 二. ...
- 如何解决WEB应用中文乱码问题
最容易出现乱码的场景是浏览器向服务器发送请求的过程,解决的策略就是强制为请求和响应设置编码格式. 一.POST 方式请求乱码 1. 在每个 Controller 中单独处理 request.setCh ...
- hadoop的checkpoint检查时间参数设置
1.通常情况下,SecondaryNameNode 每隔一小时执行一次. 在hdfs-default.xml文件中: <property> <name>dfs.namenode ...
- JavaScript的三种对话框是通过调用window对象的三个方法alert(),confirm()和prompt()
第一种:alert()方法 alert()方法是这三种对话框中最容易使用的一种,她可以用来简单而明了地将alert()括号内的文本信息显示在对话框中,我们将它称为警示对话框,要显示的信息放置在括号内, ...
- Java 基础知识总结 3
13.java类集 类集实际上是一个动态的对象数组,与一般的对象数组不同,类集中的对象内容可以任意扩充. 类集的特征: 1)这种框架是高性能的 2)框架必须允许不同类型的类集以相同的方式和高度互操作方 ...
- ubuntu16.4+nginx+uwsgi+Django 部署上线
Nginx概述 Nginx是一款轻量级的HTTP服务器,采用事件驱动和异步非阻塞处理方式框架,这让其具有极好的IO性能,市场用于服务端的反向代理和负载均衡 Nginx优点 高并发连接:官方测试Ngin ...
- HTML(5)基础
1.html常用标签 <pre>...</pre>:标识预定义文本 <a>是anchor的缩写,<a>标签定义锚点和超链接,<a>常与hre ...
- 2017年5月24日 HTML 基础知识(二)
1 快捷方式:html:xt +tab 过渡XHTML html:xs+tab 严格XHTML !+tab html5的标签结构 2.Charset 编码 <meta charset ...