[面试题]事件循环经典面试题解析

Python微信订餐小程序课程视频

https://edu.csdn.net/course/detail/36074

Python实战量化交易理财系统

https://edu.csdn.net/course/detail/35475

基础概念

  1. 进程是计算机已经运行的程序,线程是操作系统能够进行运算调度的最小单位,它被包含在进程中.浏览器中每开一个Tab页,就会打开一个进程,而这个进程又包含了很多线程.
  2. 大家都知道JS是一门单线程语言,如果遇到了非常耗时的操作,那么JS的执行就会受到阻塞,这肯定不是我们想看到的,所以这些耗时的操作,往往不是由JS线程所执行的,而是交由浏览器中的其他线程去完成的,成功之后只要在某个特定的时候进行一个回调函数即可
  3. 所以引出了事件循环的概念,在事件循环中,分两种任务,分别是宏任务和微任务
    1. 宏任务包含 ajax、setTimeout、setInterval、DOM监听、UI Rendering
    2. 微任务包含 Promise的then回调、 Mutation Observer API、queueMicrotask()等
  4. 接下来我们直接就开始练习面试题熟悉熟悉

面试题一

复制代码
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37

javascript`setTimeout(function () {
console.log(“setTimeout1”);

new Promise(function (resolve) {
resolve();
}).then(function () {
new Promise(function (resolve) {
resolve();
}).then(function () {
console.log(“then4”);
});
console.log(“then2”);
});
});

new Promise(function (resolve) {
console.log(“promise1”);
resolve();
}).then(function () {
console.log(“then1”);
});

setTimeout(function () {
console.log(“setTimeout2”);
});

console.log(2);

queueMicrotask(() => {
console.log(“queueMicrotask1”)
});

new Promise(function (resolve) {
resolve();
}).then(function () {
console.log(“then3”);
});`

  1. 先解决同步任务
    1. 输出promise1 2
  2. 开始解决异步任务中的微任务
    1. 输出then1 queueMicrotask1 then3
  3. 开始解决异步任务中的宏任务
    1. 输出setTimeout1,在第一个定时器中,又遇到了微任务,那么接着执行微任务
      1. 输出then2 然后输出 then4
    2. 目光跳出第一个定时器中,看到第二个定时器 开始输出setTimeout2
  4. 最后的完整输出为 promise1 2 then1 queueMicrotask1 then3 setTimeout1 then2 then4 setTimeout2

面试题二

复制代码
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

javascript`async function async1() {
console.log(‘async1 start’)
// await异步函数的返回结果 resolve的结果会作为整个异步函数的promise的resolve结果->同步代码
// await后面的执行代码 就会变成.then后面的执行函数->微任务
// 也就是说 console.log(‘async1 end’) 这一段是相当于then方法内的 会被加入微任务中
await async2();
console.log(‘async1 end’)
}

async function async2() {
console.log(‘async2’)
}

console.log(‘script start’)

setTimeout(function () {
console.log(‘setTimeout’)
}, 0)

async1();

new Promise(function (resolve) {
console.log(‘promise1’)
resolve();
}).then(function () {
console.log(‘promise2’)
})

console.log(‘script end’)`

  1. 先执行同步代码
    1. 输出script start async1 start async2 promise1 script end
  2. 开始执行微任务
    1. 输出async1 end promise2
  3. 最后执行宏任务
    1. 输出setTimeout
  4. 完整输出:script start async1 start async2 promise1 script end async1 end promise2 setTimeout

面试题三

复制代码
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

javascript`Promise.resolve().then(() => {
console.log(0);
//1.直接返回4 微任务不会做任何延迟
// return 4
//2.直接返回Promise.resolve(4) 微任务推迟两次
// return Promise.resolve(4);
//3.返回thenable对象
return {
then: ((resolve, reject) => {
resolve(4);
})
}
}).then((res) => {
console.log(res)
})

Promise.resolve().then(() => {
console.log(1);
}).then(() => {
console.log(2);
}).then(() => {
console.log(3);
}).then(() => {
console.log(5);
}).then(() => {
console.log(6);
})`
这道面试题有些特殊,需要大家记住两个结论

  1. 如果返回的是thenable对象,那么微任务会推迟一次,thenable对象就是实现了Promise.then的那个函数,具体可看代码
  2. 如果返回的是Promise.resolve(4),那么微任务会推迟两次,这个相当于是返回一个Promise之后又用了resolve,二者是等价的
  3. 为了配合大家理解,我给大家画了几张图,大家可以看看

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aMWrhIg9-1646846037009)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/569c204f981e42c5a98d2014e4594856~tplv-k3u1fbpfcp-zoom-1.image “上述是then中返回的三种情况”)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-itzZizEq-1646846037013)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6e5976aafab541deace1e7dfdfa55ae6~tplv-k3u1fbpfcp-zoom-1.image “普通返回,不会推迟”)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YB6D2Rjk-1646846037014)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6d76aecd1449480ab33d9ffa352ff3e2~tplv-k3u1fbpfcp-zoom-1.image “返回thenable 推迟一次”)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TxUzboTl-1646846037015)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9446c84c4a4846deb833e0b2597642fd~tplv-k3u1fbpfcp-zoom-1.image “返回Promise.resolve,推迟两次”)]

面试题四

本道题是基于node的事件循环,和浏览器的事件循环不一样,需要记住以下几点

node的事件循环也分宏任务和微任务

  • 宏任务: setTimeout、setInterval、IO事件、setImmediate、close事件
  • 微任务: Promise的then回调、process.nextTick、queueMicrotask

node的每次事件循环都是按照以下顺序来执行的

  1. next tick microtask queue
  2. other microtask queue
  3. timer queue
  4. poll queue
  5. pcheck queue
  6. close queue
复制代码
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37

javascript`async function async1() {
console.log(‘async1 start’)
await async2()
console.log(‘async1 end’)
}

async function async2() {
console.log(‘async2’)
}

console.log(‘script start’)

setTimeout(function () {
console.log(‘setTimeout0’)
}, 0)

setTimeout(function () {
console.log(‘setTimeout2’)
}, 300)

setImmediate(() => console.log(‘setImmediate’));

process.nextTick(() => console.log(‘nextTick1’));

async1();

process.nextTick(() => console.log(‘nextTick2’));

new Promise(function (resolve) {
console.log(‘promise1’)
resolve();
console.log(‘promise2’)
}).then(function () {
console.log(‘promise3’)
})

console.log(‘script end’)`

  1. 首先执行同步任务
    1. 输出script start async1 start async2 promise1 promise2 script end
  2. 接着执行微任务,因为node会优先执行nextTick这个微任务
    1. 所以先输出nextTick1 nextTick2
    2. 在输出其他微任务,输出async1 end promise3
  3. 最后执行宏任务
    1. 输出 setTimeout0 setImmediate
    2. 因为这个定时器延时3ms执行,所以会让其他的宏任务先执行完毕,才回去执行这个定时器,所以最后输出setTimeout2
  4. 最后的输出结果: script start async1 start async2 promise1 promise2 script end nextTick1 nextTick2 async1 end promise3 setTimeout0 setImmediate setTimeout2

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/401226.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CC254x--OSAL

OSAL运行原理 蓝牙协议栈PROFILE、所有的应用程序、驱动等都是围绕着OSAL组织运行的。OSAL(Operating System Abstraction Layer)操作系统抽象层,它不是一个真正的操作系统(它没有 Context Switch 上下文切换功能)&am…

CLR 与 C++的常用类型转换笔记

1. System::String 转换到 const wchar_t* const wchar_t* ToUnmanagedUnicode( System::String^ str ){ pin_ptr<const WCHAR> nativeString1 PtrToStringChars( str ); return (const wchar_t*)nativeString1;} 2. const wchar_t* / const char* 转换到 System::Strin…

mysql跨节点join——federated引擎

一、 什么是federated引擎 mysql中的federated类似于oracle中的dblink。 federated是一个专门针对远程数据库的实现&#xff0c;一般情况下在本地数据库中建表会在数据库目录中生成相对应的表定义文件&#xff0c;并同时生成相对应的数据文件。 [图] 但是通过federated引擎创建…

【阅读SpringMVC源码】手把手带你debug验证SpringMVC执行流程

Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 Python实战量化交易理财系统 https://edu.csdn.net/course/detail/35475 ✿ 阅读源码思路&#xff1a; 先跳过非重点&#xff0c;深入每个方法&#xff0c;进入的时候可以把整个可以理一下方法的执…

Zabbix监控(十六):分布式监控-Zabbix Proxy

说明&#xff1a;Zabbix支持分布式监控&#xff0c;利用Proxy代理功能&#xff0c;在其他网络环境中部署代理服务器&#xff0c;将监控数据汇总到Zabbix主服务器&#xff0c;实现多网络的分布式监控&#xff0c;集中监控。1、分布式监控原理Zabbix proxy和Zabbix server一样&am…

CC254x--BLE

BLE协议栈 BLE体系结构&#xff0c;着重了解GAP和GATT。 PHY物理层在2.4GHz的ISM频段中跳频识别。LL连接层&#xff1a;控制设备的状态。设备可能有5中状态&#xff1a;就绪standby&#xff0c;广播advertising&#xff0c;搜索scanning&#xff0c;初始化initiating和连接con…

DW 在onload运行recordset find.html时 发生了以下javascript错误

这两天打开Dreamweaver CS5&#xff0c;总是弹出一个错误&#xff0c;写着&#xff1a; 在onLoad运行RecordsetFind.htm时&#xff0c;发生了以下JavaScript错误&#xff1a; 在文件“RecordsetFind”中&#xff1a; findRsisnotdefined 在关闭Dreamweaver的时候也会弹出一个类…

Azure Container App(一)应用介绍

Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 Python实战量化交易理财系统 https://edu.csdn.net/course/detail/35475 一&#xff0c;引言 容器技术正日益成为打包、部署应用程序的第一选择。Azure 提供了许多使用容器的选项。例如&#xff0…

CC254x--API

CC2541常用API 连接 定义广播数据 GAPRole_SetParameter(GAPROLE_ADVERT_DATA,…); 自定义扫描响应数据 GAPRole_SetParameter(GAPROLE_SCAN_RSP_DATA,…); 密码管理回调 ProcessPasscodeCB(); 状态管理回调 peripheralStateNotificationCB(); 通信控制 添加GATT服务 GATTServ…

mysql 分区信息查看

select partition_name part,partition_expression expr,partition_description descr,table_rows from INFORMATION_SCHEMA.PARTITIONS where TABLE_SCHEMASCHEMA() AND TABLE_NAMEmx_domain//查看分区信息 CREATE TABLE mx_domain (id int(10) NOT NULL AUTO_INCREMENT,name…

怎样配置键盘最方便,以及一些设计的思考

使用Emacs的人&#xff0c;如果肯折腾&#xff0c;肯定有重新映射键盘的经历。我原来经常看到的是把Ctrl和Capslock交换&#xff0c;但是我感觉没什么道理&#xff0c;因为Ctrl已经用的很熟练了&#xff0c;换了反而不方便&#xff0c;而且对其他程序影响太大。那么我们就要使用…

profile、服务、特征、属性之间的关系

一个profile有很多的服务&#xff0c;一个服务又有很多的特性&#xff0c;一个特性中又有几种属性条目组成。 profile&#xff08;数据配置文件&#xff09; 一个profile文件可以包含一个或者多个服务&#xff0c;一个profile文件包含需要的服务的信息或者为对等设备如何交互的…

面试突击32:为什么创建线程池一定要用ThreadPoolExecutor?

Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 Python实战量化交易理财系统 https://edu.csdn.net/course/detail/35475 在 Java 语言中&#xff0c;并发编程都是依靠线程池完成的&#xff0c;而线程池的创建方式又有很多&#xff0c;但从大的分类…

Bootstrap datepicker 在弹出窗体modal中不工作

解决办法 在 show 方法后面 添加 下面一段代码 $(#modalCard).modal(show);—例子 打开 弹出窗体 //$(#modalCard).modal(hide); $(#modalCard).on(shown.bs.modal, function () { //$(.input-group.date).datetimepicker({ $(#dpReceiveDate).datetimepicker({ format: "…

学习Samba基础命令详解之大话西游01

服务名:smb配置目录:/etc/sabma/主配置文件:/etc/sabma/smb.conf# Global Settings 17行workgroup语法 workgtoup <工作组群>; 预设 workgroup MYGROUP 说明 设定 Samba Server 的工作组 例 workgroup workgroup 和WIN2000S设为一个组&#xff0c;可在网上邻居可中看到…

实例讲解getopt()函数的使用

[cpp] view plaincopy #include <stdio.h> #include <unistd.h> int main(int argc, char *argv[]) { extern char *optarg;//保存选项的参数 extern int optind, opterr, optopt; int ch; printf("\n\n"); pri…

机器学习实战 | SKLearn最全应用指南

Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 Python实战量化交易理财系统 https://edu.csdn.net/course/detail/35475 作者&#xff1a;韩信子ShowMeAI 教程地址&#xff1a;http://www.showmeai.tech/tutorials/41 本文地址&#xff1a;http…

windows 64位 安装mvn提示 不是内部或外部命令

在安装mvn的过程中当在mvn的目录下去执行mvn命令的时候是可以正常执行的&#xff0c;当设置好环境变量后执行后发现提示mvn不是内部命令。 原因是设置的MAVEN_HOME变量未被Path解析&#xff0c;解决办法是 直接把path中的%MAVEN_HOME%\bin 换成MAVEN_HOME的绝对路径&#xff0c…

Scheme语言入门

2019独角兽企业重金招聘Python工程师标准>>> Scheme语言入门 最早听说 LISP&#xff0c;是 Stallman 的 GNU Emacs 中将 LISP 作为嵌入语言&#xff0c;定制和增强 Emacs。GNU Emacs 是一个文本编辑器&#xff0c;文本就是一种符号&#xff0c;而 Lisp 正好就是针对…