当前位置：首页 > 科技 > 软件

这一次，彻底解决面试中看代码说结果的问题！

来源：责编：时间：2024-05-20 17:56:32 88观看

导读Hello，大家好，我是 Sunday。【看代码说结果】一直是前端面试中的常见问题。最近在陪几个同学面试过程中，几乎每个中、大厂的面试都会遇到一个或几个这样的问题。虽然这样的问题如此高频，但是能够回答好的同学却寥寥无几。

Hello，大家好，我是 Sunday。

【看代码说结果】一直是前端面试中的常见问题。最近在陪几个同学面试过程中，几乎每个中、大厂的面试都会遇到一个或几个这样的问题。

陪同学面试中遇到的真题

虽然这样的问题如此高频，但是能够回答好的同学却寥寥无几。

每次事后跟同学沟通，得到的结果都是：“实际开发中没有这么写的，NND 奇葩面试题！” 大家是不是也会有相同的感受呢？

是的！实际开发中我们肯定不会写出面试题里的凌乱场景。但是，我们不要忘记，学习的目的是：为了拿到更高薪资的 offer！，所以对很多同学而言面试比实际开发更重要！只有很好的解决了面试的问题，大家才可以拿到满意的 offer。

所以，解决【看代码说结果】的问题就变得至关重要了。那么咱们今天，就好好地来聊聊 JS 中的执行机制问题，帮大家彻底理解 JS 的执行逻辑！

关于 JavaScript 线程基础逻辑

JavaScript 是一种单线程语言。

虽然最新的 HTML5 中引入了 Web Worker，但 JavaScript 单线程的核心保持不变。

因此，JavaScript中所有的“多线程”都是用单线程模拟的，JavaScript中的所有多线程都是骗人的！

JavaScript 事件循环

由于 JavaScript 是单线程的，它就像一家只有一个窗口的银行，客户需要一一排队来处理交易。

同样，JavaScript 任务也需要按顺序执行，一个接一个。如果一项任务花费太长时间，则下一项任务必须等待。

那么问题就来了：如果我们想浏览新闻，但新闻中的高清图片加载缓慢，我们的网页是否要一直卡住，直到图片完全显示出来？

因此，JS将任务分为两类：

同步任务
异步任务

当我们打开一个网站时，网页的渲染过程由一堆同步任务组成，例如：骨架屏幕、页面元素。

消耗大量资源且需要很长时间才能完成的任务（例如：加载图像、音乐文件）则是异步的。

图片

同步和异步任务进入不同的执行“地方”，同步任务进入主线程，异步任务进入事件表并注册函数。
当指定的任务完成时，事件表会将这个函数移动到事件队列中。
主线程内的任务完成后，会从Event Queue中读取相应的函数并在主线程中执行。
上述过程会不断重复，通常称为事件循环。

那么 JS 是如何知道主线程为空的呢？

在 JavaScript 引擎有一个监控进程，不断检查主线程执行栈是否为空。一旦为空，它就会去事件队列检查是否有任何函数正在等待调用。

如下面的代码所示：

let data = [];$.ajax({    url:www.lgdsunday.club,    data:data,    success:() => {        console.log('发送成功!');    }})console.log('代码执行完成');

上面是一个简单的ajax请求代码：

ajax进入事件表并注册回调函数success。
执行console. log(‘发送成功!’)。
ajax事件完成，回调函数成功进入事件队列。
主线程success从事件队列中读取并执行回调函数。

通过上面的文字和代码，大家应该对JavaScript中的执行顺序有了初步的了解了吧。

那么接下来咱们来看一个扰乱执行顺序的 “元凶” setTimeout。

万恶的 setTimeout

setTimeout 可以延迟执行代码，比如：

setTimeout(() => {    task();},3000)console.log('一个普通的打印');

根据我们之前的结论，setTimeout是异步的。所以，同步任务console.log应该先执行。因此，我们的结论是：

// 一个普通的打印// task()

但是，这里我们要注意 3000 毫秒并不是 task 的执行时间，而是 task 进入任务队列（主线程）的时间

3秒后，计时事件timeout完成。
task()进入任务队列（主线程）

那么同样的道理，在面试中常见的 setTimeout(fn, 0) 的延迟 0 毫秒是什么意思呢？

setTimeout(fn ,0)是指定当堆栈中的所有同步任务完成且堆栈变空时，应在主线程上最早可用的空闲时间执行某个任务，而不需要等待任何额外的秒数。

所以，setTimeout(fn, 0) 并不会立刻执行。

宏任务与微任务

宏任务与微任务的概念在这种题目中也是必须要掌握的。

宏任务：包括整体脚本代码、setTimeout、setInterval
微任务：Promise、process.nextTick

事件循环中事件的顺序决定了JavaScript代码的执行顺序。

输入整个脚本（宏任务）后，它开始第一个循环
然后它执行所有微任务。接下来，又从宏任务开始，直到一个任务队列完成后，才再次执行所有的微任务

我们通过一段代码来看下这个问题：

setTimeout(function() {    console.log('setTimeout');})new Promise(function(resolve) {    console.log('promise');}).then(function() {    console.log('then');})console.log('console');

这段代码作为宏任务，进入主线程。
当遇到 setTimeout 时，其回调函数被注册并调度到宏任务事件队列中。（注册流程同上，下文不再赘述）。
接下来，当遇到 Promise 时，new Promise立即执行，并将该then函数分派到微任务事件队列中。
当遇到 console.log() 时，立即执行。
在将整个脚本作为第一个宏任务执行之后。我们发现它 then 位于微任务事件队列中并被执行。
第一轮事件循环结束。
第二轮循环开始；当然是从宏任务Event Queue开始。队列中对应setTimeout的回调函数立即被执行。
结尾。

本文链接：//www.dmpip.com//www.dmpip.com/showinfo-26-89413-0.html这一次，彻底解决面试中看代码说结果的问题！

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇：我发现了大厂OpenApi接口的bug！你发现了吗？

下一篇：入门赛车模拟器新标杆！MOZA 发布 3.9 牛米伺服直驱套装

标签：

热门焦点

一加Ace2 Pro官宣：普及16G内存引领24G

一加官方今天继续为本月发布的新机一加Ace2 Pro带来预热，公布了内存方面的信息。“淘汰 8GB ，12GB 起步，16GB 普及，24GB 引领，还有呢？#一加Ace2Pro#，2023 年 8 月，敬请期待。”同时
vivo TWS Air开箱体验：真轻臻好听

在vivo S15系列新机的发布会上，vivo的最新款真无线蓝牙耳机vivo TWS Air也一同发布，本次就这款耳机新品给大家带来一个简单的分享。外包装盒上，vivo TWS Air保持了vivo自家产
不容错过的MSBuild技巧，必备用法详解和实践指南

一、MSBuild简介MSBuild是一种基于XML的构建引擎，用于在.NET Framework和.NET Core应用程序中自动化构建过程。它是Visual Studio的构建引擎，可在命令行或其他构建工具中使用
使用LLM插件从命令行访问Llama 2

最近的一个大新闻是Meta AI推出了新的开源授权的大型语言模型Llama 2。这是一项非常重要的进展：Llama 2可免费用于研究和商业用途。(几小时前，swyy发现它已从LLaMA 2更名为Lla
一文搞定Java NIO，以及各种奇葩流

大家好，我是哪吒。很多朋友问我，如何才能学好IO流，对各种流的概念，云里雾里的，不求甚解。用到的时候，现百度，功能虽然实现了，但是为什么用这个？不知道。更别说效率问题了~下次再遇到，
JVM优化：实战OutOfMemoryError异常

一、Java堆溢出堆内存中主要存放对象、数组等，只要不断地创建这些对象，并且保证 GC Roots 到对象之间有可达路径来避免垃圾收集回收机制清除这些对象，当这些对象所占空间超过
大厂卷向扁平化

来源：新熵作者丨南枝编辑丨月见大厂职级不香了。俗话说，兵无常势，水无常形，互联网企业调整职级体系并不稀奇。7月13日，淘宝天猫集团启动了近年来最大的人力制度改革，目前已形成一
苹果、三星、惠普等暂停向印度出口笔记本和平板电脑

集微网消息，据彭博社报道，在8月3日印度突然禁止在没有许可证的情况下向印度进口电脑/平板及显示器等产品后，苹果、三星电子和惠普等大公司暂停向印度
引领旗舰级影像能力向中端机普及 OPPO K11 系列发布 1799 元起

7月25日，OPPO正式发布K系列新品—— OPPO K11 。此次 K11 在中端手机市场长期被忽视的影像板块发力，突破性地搭载索尼 IMX890 旗舰大底主摄，支持 OIS