1.首先下面代码输出什么?

 for (var i = 0; i < 5; i++) {
console.log(i);
}

输出:0 1 2 3 4

2.上面只是普通的输出,没有陷阱再看下面这个题(套路开始了)

 for (var i = 0; i < 5; i++) {
setTimeout(function() {
console.log(i);
}, 1000 * i);
}

输出:5 5 5 5 5

setTimeout 会延迟执行,那么执行到 console.log 的时候,其实 i 已经变成 5 了,因此会输出5个5

3.上面的题超出我们的预想,我们肯定想得到的是0 1 2 3 4,那么问题来了 怎么才能输出0 1 2 3 4呢

 for (var i = 0; i < 5; i++) {
(function(i) {
setTimeout(function() {
console.log(i);
}, i * 1000);
})(i);
}

或者:

 for(var i = 0; i < 5; i++) {
setTimeout(function(i) {
return function() {
console.log(i);
};
}(i), i * 1000);
}

输出:0 1 2 3 4

加上闭包,就能解决这个问题

4.如第一个假设删除了function(i)中的i呢,怎么办?

 for (var i = 0; i < 5; i++) {
(function() {
setTimeout(function() {
console.log(i);
}, i * 1000);
})(i);
}

输出:5 5 5 5 5

内部其实没有对 i 保持引用,其实会变成输出 5个5

5.再更改一下

 for (var i = 0; i < 5; i++) {
setTimeout((function(i) {
console.log(i);
})(i), i * 1000);
}

输出:0 1 2 3 4 (立刻输出,没有时间间隔)

给 setTimeout 传递了一个立即执行函数。setTimeout 可以接受函数或者字符串作为参数,那么这里立即执行函数是个啥呢,应该是个 undefined ,也就是说等价于:

setTimeout(undefined, ...);

而立即执行函数会立即执行,那么应该是立马输出的。

“应该是立马输出 0 到 4 吧。”

6.对于promise的考察

 setTimeout(function() {
console.log(1)
}, 0);
new Promise(function executor(resolve) {
console.log(2);
for( var i=0 ; i<10000 ; i++ ) {
i == 9999 && resolve();
}
console.log(3);
}).then(function() {
console.log(4);
});
console.log(5);

输出:2 3 5 4 1

考察 JavaScript 的运行机制的,

首先先碰到一个 setTimeout,于是会先设置一个定时,在定时结束后将传递这个函数放到任务队列里面,因此开始肯定不会输出 1 。

然后是一个 Promise,里面的函数是直接执行的,因此应该直接输出 2 3 。

然后,Promise 的 then 应当会放到当前 tick 的最后,但是还是在当前 tick 中。

因此,应当先输出 5,然后再输出 4 。

最后在到下一个 tick,就是 1 。

所以输出:2 3 5 4 1

一道容易栽坑的有趣的面试题(关于js,定时器,闭包等)的更多相关文章

  1. maven webapp栽坑录

    一.需求 如何将一个java web项目传给别人?放到github上.要想放到github上,就要学会git,markdown和maven.像那些jar包是不鼓励传到github上的,应该尽量把源文件 ...

  2. 【React踩坑记二】react项目实现JS路由跳转

    这里使用的是4.31版本的react-router-dom "react-router-dom": "^4.3.1", 直接使用以下代码即可实现路由跳转 thi ...

  3. java抽象-老师的生日-逻辑思维-有趣的面试题-遁地龙卷风

    (-1)写在前面 都快去北京了,硬生生的安排一场java考试,对于那些特别细节的东西我忘了吧也不觉得有什么不好,以前都记得,也都见过,只不过平时不常用连接断了,但是你死记硬背是没用的,一段时间后还是会 ...

  4. 一道阿里面试题(js)

    写一个求和的函数sum,达到下面的效果 // Should equal 15 sum(1, 2, 3, 4, 5); //Should equal 0 sum(5, 'abc', -5); //Sho ...

  5. 分享一道JS前端闭包面试题

    输出以下代码的结果 function fun(n,o){ console.log(o); return { fun:function(m){ return fun(m,n);//[1] } } } v ...

  6. 一道面试题关于js中添加动态属性

    js中数据类型包含基本数据类型和引用类型,基本类型包括:string.null.undefined.number.boolean.引用类型即是对象比如:array  .function以及自定义对象等 ...

  7. 一道面试题关于js中逗号

    一.今天遇到一个面试题,自我感觉是会,但是却做错了.人都是这样,自我感觉良好,其实也就预警自己已经忽视一些细节以及一些自我感知. 面试题: ,j=,k; ,j<;i++,j++){ k=i+j; ...

  8. 踩坑,vue项目中,main.js引入scss文件时报错

    当我们在src目录下创建.scss文件,并在main.js中引用,运行时会报: ERROR Failed to compile with 1 errors 5:25:07 PMThis relativ ...

  9. 一道面试题:js返回函数, 函数名后带多个括号的用法及join()的注意事项

    博客搬迁,给你带来的不便,敬请谅解! http://www.suanliutudousi.com/2017/11/13/js%E8%BF%94%E5%9B%9E%E5%87%BD%E6%95%B0%E ...

随机推荐

  1. 【BZOJ4025】二分图 LCT

    [BZOJ4025]二分图 Description 神犇有一个n个节点的图.因为神犇是神犇,所以在T时间内一些边会出现后消失.神犇要求出每一时间段内这个图是否是二分图.这么简单的问题神犇当然会做了,于 ...

  2. cockroachdb 安装试用(单机伪分布式)

    1. 下载 以下地址,选择对应的操作系统版本即可 https://www.cockroachlabs.com/docs/stable/install-cockroachdb.html 2. 启动 // ...

  3. php替换 json符号

  4. 在Qt中如何使用QtDesigner创建的UI文件(一) (转)

    使用Qt有一些时间了,一直在IDE环境(qtcreator和VS2003+集成器)中使用,自然少了很多麻烦的步骤.但是在享受这种便利的同时,我们也失去了理解更多知识背后的点滴.在IDE中,如果我们要开 ...

  5. 关于angular.extend的用法

    ng中的ng-function中会有些方法,便于我们进行js代码的编写 关于angular.extend(dst, src);通过从src对象复制所有属性到dst来扩展目标对象dst.你可以指定多个s ...

  6. 20 几个知名公司的 Java 面试题汇总

    查看不同公司新鲜真实的Java面试题,摘自Glassdoor.com 巴克莱投资: 假设有一个 getNextparson() 方法返回 Person 对象,Person 类实现了 comparabl ...

  7. Eclipse编译问题

    问题现象:Maven编译ok,Eclipse始终存在编译错误,点了工程的刷新,没用,点了Eclipse上面的菜单Project -> Clean,也没用.后来看了下工作空间项目目录,发现.cla ...

  8. mysql的三种安装方式(详细)

    安装MySQL的方式常见的有三种: rpm包形式 通用二进制形式 源码编译 1,rpm包形式 (1) 操作系统发行商提供的 (2) MySQL官方提供的(版本更新,修复了更多常见BUG)www.mys ...

  9. AT 指令和常见错误码

    一. 一般命令 1. AT+CGMI 给出模块厂商的标识. 2. AT+CGMM 获得模块标识.这个命令用来得到支持的频带(GSM 900,DCS 1800 或PCS 1900).当模块有多频带时,回 ...

  10. 与FPGA相关的独热码

    独热码在状态机里面使用比价广泛,这一块有些人爱用,有些人嫌烦,有时候可以用用格雷码跳转,不过格雷码只支持那种一步到底的,中间有分支就不好做了,所以后来还是回到了独热码的正道上. 说白了独热码的使用,在 ...