一次围绕setTimeout的前端面试经验分享


Posted in Javascript onJune 15, 2017

前言

前端这个近年的热门领域,搞事气氛特别强烈,我朋友小伟最近就在疯狂面试,遇到了许多有趣的面试官,有趣的面试题,我来帮这个搞事 boy 转述一下。

具体如下:

以下是我一个朋友的故事,真的不是我。

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

“小伟,你说说这几行代码会输出什么?”

当面试官在 Sublime 打出这几行代码时,我竟有点蒙蔽。蛤?这不是最简单的一个循环吗?是不是有陷阱啊,我思索一下,这好像和我看的那个闭包的题很像啊,这面试官是不是没写完啊?有毒啊。

“应该是直接输出 0 到 4 吧...”,我弱弱的说到。

“是啊,别紧张,这题没啥陷阱,我就是随便写一下。”

(Excuse me?面试官你是来搞笑的吗,吓死老子了!)

“那你在看看这几行代码会输出什么?”

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

额,什么鬼,怎么还不是我背了那么多遍的那道闭包题,让我想想。 setTimeout 会延迟执行,那么执行到 console.log 的时候,其实 i 已经变成 5 了,对,就是这样,这么简单怎么可能难到老子。

“应该是开始输出一个 5,然后每隔一秒再输出一个 5,一共 5 个 5。”

“对,那应该怎么改才能输出 0 到 4 呢?”

终于到我熟悉的了,加个闭包就解决了,稳!

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

“很好,那你能说一下,我删掉这个 i 会发生什么吗?”

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

“这样子的话,内部其实没有对 i 保持引用,其实会变成输出 5。”

“很好,那我给你改一下,你看看会输出什么?”

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

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

setTimeout(undefined, ...);

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

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

“哎哟,不错哦,最后一题,你对 Promise 了解吧?”

“还可以吧...”

“OK,那你试试这道题。”

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);

WTF!!!!我想静静!

这道题应该考察我 JavaScript 的运行机制的,让我理一下思路。

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

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

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

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

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

“2 3 5 4 1”

“好滴,等待下一轮面试吧。”

So easy!妈妈再也不用担心我的面试了。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript radio 联动效果
Mar 04 Javascript
jquery提取元素里的纯文本不包含span等里的内容
Sep 30 Javascript
JS简单实现登陆验证附效果图
Nov 19 Javascript
js中opener与parent的区别详细解析
Jan 14 Javascript
javascript图片预加载完整实例
Dec 10 Javascript
JS 循环li添加点击事件 (闭包的应用)
Dec 10 Javascript
微信小程序实现笑脸评分功能
Nov 03 Javascript
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 Javascript
移动端吸顶fixbar的解决方案详解
Jul 17 Javascript
layui表格 列自动适应大小失效的解决方法
Sep 06 Javascript
原生js实现表格循环滚动
Nov 24 Javascript
vue watch监控对象的简单方法示例
Jan 07 Vue.js
利用JS对iframe父子(内外)页面进行操作的方法教程
Jun 15 #Javascript
使用Require.js封装原生js轮播图的实现代码
Jun 15 #Javascript
JavaScript实现选中文字提示新浪微博分享效果
Jun 15 #Javascript
详解vue跨组件通信的几种方法
Jun 15 #Javascript
Bootstrap响应式导航由768px变成992px的实现代码
Jun 15 #Javascript
javascript完美实现给定日期返回上月日期的方法
Jun 15 #Javascript
JS自动生成动态HTML验证码页面
Jun 14 #Javascript
You might like
php之XML转数组函数的详解
2013/06/07 PHP
PHP CURL 多线程操作代码实例
2015/05/13 PHP
thinkphp实现163、QQ邮箱收发邮件的方法
2015/12/18 PHP
如何离线执行php任务
2017/02/21 PHP
分享8款优秀的 jQuery 加载动画和进度条插件
2012/10/24 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
2013/12/11 Javascript
基于jquery实现等比缩放图片
2014/12/03 Javascript
JS实现的另类手风琴效果网页内容切换代码
2015/09/08 Javascript
解决wx.onMenuShareTimeline出现的问题
2016/08/16 Javascript
jquery插入兄弟节点的操作方法
2016/12/07 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
2017/01/05 Javascript
nodejs基础应用
2017/02/03 NodeJs
vue插件vue-resource的使用笔记(小结)
2017/08/04 Javascript
Node.js静态服务器的实现方法
2018/02/28 Javascript
js实现图片上传即时显示效果
2019/09/30 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
2020/02/10 Javascript
js判断鼠标移入移出方向的方法
2020/06/24 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
element中table高度自适应的实现
2020/10/21 Javascript
[02:40]2018年度DOTA2最佳新人-完美盛典
2018/12/16 DOTA
[52:03]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第三场 1月31日
2021/03/11 DOTA
Python开发实例分享bt种子爬虫程序和种子解析
2014/05/21 Python
python计算方程式根的方法
2015/05/07 Python
在windows系统中实现python3安装lxml
2016/03/23 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
Python3的高阶函数map,reduce,filter的示例详解
2019/07/23 Python
Python本地及虚拟解释器配置过程解析
2020/10/13 Python
卡塔尔航空官方网站:Qatar Airways
2017/02/08 全球购物
德国童装购物网站:NICKI´S.com
2018/04/20 全球购物
巴西宠物商店:Cobasi
2019/04/19 全球购物
库存图片、照片、矢量图、视频和音乐:Shutterstock
2021/02/12 全球购物
爱牙日活动总结
2014/08/29 职场文书
2014年学校党建工作总结
2014/11/11 职场文书
施工现场安全管理制度
2015/08/05 职场文书
《秋天的图画》教学反思
2016/02/19 职场文书
python实现一个简单的贪吃蛇游戏附代码
2022/06/28 Python