一道经典面试题-----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)的更多相关文章

  1. setTimeout(function(){}, 0);

    for (var i = 0; i < 3; i++) { setTimeout(function() { console.log(i); }, 0); console.log(i); } 结果 ...

  2. 关于fork的一道经典面试题

    这是一道面试题,问程序最终输出几个“-”: #include<stdio.h> #include<sys/types.h> #include<unistd.h> i ...

  3. 关于global和$GLOBALS[]的一道经典面试题

    在不执行程序的情况下,你觉得的输出结果是什么? <?php $var1 = 1; $var2 = 2; function test(){ global $var1,$var2; $var2 = ...

  4. 一道经典面试题,atoi函数的实现

    参考资料 (1)atoi函数的实现 (2)<剑指offer> 题目分析 本题需要注意的有几个方面: (1)检查输入参数,指针是否为NULL: (2)去除字符串前面的空格 (3)处理正负符号 ...

  5. java120经典面试题

    经典面试题 -----version 1.0 题注:以下答案仅限本人个人见解,若有错误和建议请多多指教.QQ:1807812486 题目来源 1.什么是Java虚拟机?为什么Java被称作是" ...

  6. 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); }; / ...

  7. 解析js中作用域、闭包——从一道经典的面试题开始

    如何理解js中的作用域,闭包,私有变量,this对象概念呢? 就从一道经典的面试题开始吧! 题目:创建10个<a>标签,点击时候弹出相应的序号 先思考一下,再打开看看 //先思考一下你会怎 ...

  8. 一道经典JS面试题

    超过80%的候选人对下面这道JS面试题的回答情况连及格都达不到.这究竟是怎样神奇的一道JS面试题?他考察了候选人的哪些能力?对正在读本文的你有什么启示? 不起眼的开始 招聘前端工程师,尤其是中高级前端 ...

  9. OpenJDK源码研究笔记(五)-缓存Integer等类型的频繁使用的数据和对象,大幅度提升性能(一道经典的Java笔试题)

    摘要 本文先给出一个看似很简单实则有深意的Java笔试面试题,引出JDK内部的缓存. JDK内部的缓存,主要是为了提高Java程序的性能. 你能答对这道"看似简单,实则有深意"的J ...

随机推荐

  1. Python数据分析之pandas入门

    一.pandas库简介 pandas是一个专门用于数据分析的开源Python库,目前很多使用Python分析数据的专业人员都将pandas作为基础工具来使用.pandas是以Numpy作为基础来设计开 ...

  2. oc for in遍历

    在oc中用for in遍历可变数组时,不能修改删除新增元素,因为for in遍历是枚举遍历,在遍历的过程中不能修改容器里的值. NSMutableArray *arr=[NSMutableArray ...

  3. Java基础——GUI编程(二)

    一.事件监听机制 -- 事件源:awt 或swing包中的那些图形界面组件,即发生事件的组件 -- 事件:Event  用户对组件的一个操作 -- 监听器:Listener  负责处理事件的方法 二. ...

  4. 如何解决WEB应用中文乱码问题

    最容易出现乱码的场景是浏览器向服务器发送请求的过程,解决的策略就是强制为请求和响应设置编码格式. 一.POST 方式请求乱码 1. 在每个 Controller 中单独处理 request.setCh ...

  5. hadoop的checkpoint检查时间参数设置

    1.通常情况下,SecondaryNameNode 每隔一小时执行一次. 在hdfs-default.xml文件中: <property> <name>dfs.namenode ...

  6. JavaScript的三种对话框是通过调用window对象的三个方法alert(),confirm()和prompt()

    第一种:alert()方法 alert()方法是这三种对话框中最容易使用的一种,她可以用来简单而明了地将alert()括号内的文本信息显示在对话框中,我们将它称为警示对话框,要显示的信息放置在括号内, ...

  7. Java 基础知识总结 3

    13.java类集 类集实际上是一个动态的对象数组,与一般的对象数组不同,类集中的对象内容可以任意扩充. 类集的特征: 1)这种框架是高性能的 2)框架必须允许不同类型的类集以相同的方式和高度互操作方 ...

  8. ubuntu16.4+nginx+uwsgi+Django 部署上线

    Nginx概述 Nginx是一款轻量级的HTTP服务器,采用事件驱动和异步非阻塞处理方式框架,这让其具有极好的IO性能,市场用于服务端的反向代理和负载均衡 Nginx优点 高并发连接:官方测试Ngin ...

  9. HTML(5)基础

    1.html常用标签 <pre>...</pre>:标识预定义文本 <a>是anchor的缩写,<a>标签定义锚点和超链接,<a>常与hre ...

  10. 2017年5月24日 HTML 基础知识(二)

    1 快捷方式:html:xt +tab   过渡XHTML html:xs+tab  严格XHTML !+tab  html5的标签结构 2.Charset   编码 <meta charset ...