当前位置:首页 > 日记 > 正文

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

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

前言

前端这个近年的热门领域,搞事气氛特别强烈,我朋友小伟最近就在疯狂面试,遇到了许多有趣的面试官,有趣的面试题,我来帮这个搞事 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!妈妈再也不用担心我的面试了。

总结

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

相关文章

Win7 IIS7.5配置解决ASP的500错误

Win7 IIS7.5配置解决ASP的500错误

错误,配置,电脑软件,ASP,http 500内部服务器错误说明IIS服务器无法解析ASP代码,如果你联网还发现找不到服务器就是500错误了.在iis7里面的iis设置要开启启用父路径这个选项,之后就可以了,当然为了调试程序可以打开&ldquo;ASP设置选项-调试属性…

Angular.js中数组操作的方法教程

Angular.js中数组操作的方法教程

方法,教程,数组操作,电脑软件,Angular,前言前端技术的发展是如此之快,各种优秀技术、优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢。最近在学习Angular.js,将自己学习的一些经验技巧分享给大家,下面本文将给大家…

ppt2010怎么设置预设颜色ppt2010设

ppt2010怎么设置预设颜色ppt2010设

设置,方法,步骤,颜色,功能,  其实ppt2010中有一个预设颜色的功能,想必很多人都不知道吧,那么今天小编就来教你怎么设置预设颜色功能。ppt2010设置预设颜色功能的步骤第一步:快速双击打开桌面PowerPoint2010文档,右键弹出选项打开亦可、ppt201…

怎么让别人查找不到自己的QQ帐号?

怎么让别人查找不到自己的QQ帐号?

帐号,查找,自己的,电脑软件,QQ,  现在有的时候别人给你QQ帐号。可是我们在查找的时候就会显示帐号不存在,我们怎么去设置让别人也查找不到自己的QQ呢?只要简单设置一下就能做到哦。怎么让别人查找不到自己的QQ帐号打开QQ我的资料页面。可…

怎么在wps演示中设置透明度wps演示

怎么在wps演示中设置透明度wps演示

设置,透明度,步骤,方法,演示,  WPS Office是金山推出的一款优秀办公软件,相信许多人用过其中的WPS演示。那么下面小编就教你怎么在wps演示中设置图片透明度.在wps演示中设置图片透明度的步骤第一步,插入一张图片。wps演示中设置图片透明度…

PHP创建/删除/复制文件夹、文件

PHP创建/删除/复制文件夹、文件

文件,删除,电脑软件,PHP,学习了PHP的文件编程,其中PHP自身提供了复制文件的函数(copy)。自己也写了一个功能差不多的复制图片的函数,以此在这里记录一下。在说该函数之前,先介绍一下使用PHP创建/删除文件夹、文件等知识。1.创建文件夹<?php //…

深入理解AngularJs-scope的脏检查(一

深入理解AngularJs-scope的脏检查(一

检查,电脑软件,AngularJs,scope,进入正文前的说明:本文中的示例代码并非AngularJs源码,而是来自书籍<<Build Your Own AngularJs>>, 这本书的作者仅依赖jquery和lodash一步一步构建出AngularJs的各核心模块,对全面理解AngularJs有非常巨大的帮…

AI三步制作超漂亮的悖反空间效果

AI三步制作超漂亮的悖反空间效果

空间,三步,效果,漂亮,电脑软件,这篇教程教的AI学习者们使用AI快速三步制作悖反空间效果,所以悖反空间其实就是不同透视角度物体的重合。这样制作出来的效果会更加吸引人的眼球和引发人们细看的兴趣。好了,我们先来看看最终的效果图:具体的制作…

详解PHP防止直接访问.php 文件的实

详解PHP防止直接访问.php 文件的实

文件,方法,直接访问,详解,电脑软件,详解PHP防止直接访问.php 文件的实现方法为了保证我们用 PHP 写的 API 的安全性要禁止除了接口外的访问方式.比如我们的项目为 example, 其下有文件夹 dir1、有个接口文件 api.php. 结构为: 输入图片说明…

微信小程序 生命周期函数详解

微信小程序 生命周期函数详解

周期函数,详解,生命,程序,电脑软件,微信小程序 生命周期函数小程序中 判断当前首页是从其他页面返回,还是由入口打开由于小程序的数据在我们退出小程序时并没有得到释放,因此再次点击开来数据依然没有变成初始化 解决方法:在小程序 data 数据…

2017扣扣个性签名搞笑的

2017扣扣个性签名搞笑的

个性签名,搞笑,最新版,热门,经典,  2017年扣扣个性签名档,有哪些搞笑的话语呢?下面是小编给大家带来的扣扣个性签名搞笑的,希望你喜欢。2017扣扣个性签名搞笑的【经典版】1) 能不打就别打,一旦打起来,就给我死命磕2) 我可以爱你爱到撕心裂肺,…

fireworks简单几步制作layer

fireworks简单几步制作layer

几步,简单,电脑软件,fireworks,layer,在使用fireworks的时候,想要使用fireworks做layer,如何制作呢?下面讲解具体的制作方法!最终效果:步骤:1、先打开ps&ldquo;文件&rdquo;&rarr;&rdquo;新建&rdquo;,然后点击工具栏的&ldquo;椭圆选框工具&rdquo;2…