同步、异步事件循环（宏任务、微任务「大厂真题解析」）

引言：Js 是单线程，多任务执行时会触发进程阻塞问题。所以，Js 有两种任务的执行模式：同步和异步。

同步任务：运行在主线程，先于异步任务执行

异步任务：分为宏任务和微任务，微任务先于宏任务执行

微任务：process.nextTick、Promise.then/ catch/finally、async修饰的函数，默认返回 new Promise对象

宏任务：setTimeout、setInterval、ajax请求、文件读写操作

实操1：

        async function async1() {console.log('async1 start');await async2();console.log('async1 end');}async function async2() {console.log('async2');}console.log('script start');setTimeout(() => {console.log('setTimeout');}, 0);async1();new Promise(function(resolve) {console.log('promise1');resolve();}).then(function() {console.log('promise2');});console.log('script end');

结果：
script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout解释：
先async 声明俩个函数但未执行；随之执行同步语句 script start；
接着 setTimeout 进入宏任务队列，执行async1() 输出async1 start；
到达await async2() 立即执行async2() 输出 async2；
而后面的语句console.log('async1 end') 进入微任务队列；
继续往后到达 new Promise 开始执行输出promise1；
遇见resolve() 需要通过 .then 得结果，其进入微任务队列，无输出；
（到此，微任务队列有：async1 end，promise2 ；宏任务队列有：setTimeout）
接着同步语句输出script end；
然后，依次输出微任务：async1 end，promise2
然后，依次输出宏任务：setTimeout

实操2：

<script>console.log("start");process.nextTick(() => {console.log("a");setImmediate(() => {console.log("d");});new Promise(res => res()).then(() => {console.log("e");process.nextTick(() => {console.log("f");});new Promise(r => {r()}).then(() => {console.log("g");});setTimeout(() => {console.log("h");});});});setImmediate(() => {console.log("b");process.nextTick(() => {console.log("c");});new Promise(res => res()).then(() => {console.log("i");});});console.log("end");
</script>

解释：
第一轮循环：
1、打印  start
2、打印  end
3、nextTick放到微任务队列里nextTick1
4、setImmediate放到宏任务队列里setImmediate1
第一轮循环打印出的是 start end
当前宏任务队列：setImmediate1
当前微任务队列：nextTick1 第二轮循环：
1、执行所有微任务
2、打印  a
3、setImmediate放到宏任务队列里setImmediate2
4、打印  e
5、nextTick放到微任务队列里nextTick1
6、then放到微任务队列里then1
7、setTimeout放到宏任务队列里setTimeout1
第二轮循环打印出的是 start end a e
当前宏任务队列：setImmediate1 setImmediate2 setTimeout1
当前微任务队列：nextTick1 then1第三轮循环：
1、执行所有微任务
2、执行微任务nextTick1，打印 f
3、执行微任务then1，打印 g
4、执行所有宏任务
5、由于setTimeout高于setImmediate，所以执行setTimeout1 ，打印 h
6、执行宏任务setImmediate1 打印  b
7、nextTick放到微任务队列里nextTick1
8、then放到微任务队列里then1
第三轮循环打印出的是 start end a e f g h b
当前宏任务队列：setImmediate2
当前微任务队列：nextTick1 then1第四轮循环：
1、执行微任务
2、执行微任务nextTick1，打印 c
3、执行微任务then1，打印 i
4、执行宏任务setImmediate2 打印 d
第四轮循环打印出的是 start end a e f g h b c i d

实操3：

console.log(1);async function asyFunction () {console.log(2);await console.log(3);await console.log(4);console.log(5);return 6
}new Promise((resolve, reject) => {console.log(10);resolve();
}).then(res => {console.log(11);
})console.log(7);setTimeout(() => {console.log(8)
}, 2000)setTimeout(() => {console.log(9)
}, 1000)asyFunction().then(res => { console.log(res) });

结果：1 10 7 2 3 11 4 5 6 9 8
解释：
首先，执行同步语句，输出1
接着async 声明一个函数但未执行；随之执行 new Promise 输出10，并将.then（11）放进微队列
然后，执行同步语句，输出7；接着俩个 setTimeout 进入宏队列
最后执行前面声明的异步函数，立即输出 2 ，3（类似第一题）
没有输出4是因为前一个await，将其 及后的 .log（5）均放入微队列
接着 return 6 由该异步函数的.then 接住放入微队列
到此，微队列里依次是 11 4 5 6，逐个输出
而宏队列的由延迟时间大小，依次输出 9 8

同步、异步事件循环（宏任务、微任务「大厂真题解析」）相关推荐

事件循环-宏任务-微任务
概述 Javascript是一门单线程的脚本语言时间循环(EventLoop)是JavaScript的运行机制首先我们先看一下以下代码 setTimeout(function() {console ...
Node.js文件的同步异步事件循环
刚接触Node.js关于同步异步,事件循环的笔记: 1,文件同异步 var fs = require('fs'); fs.readFile('file.txt', 'utf-8', function( ...
JS事件循环机制：同步与异步任务之宏任务微任务
JS事件循环机制:同步与异步任务之宏任务微任务阅读目录 javascript事件循环 setTimeout和setInterval中的执行时间宏任务和微任务 javascript是单线程,一 ...
dom更新到底在javascript事件循环的哪个阶段？「前端每日一题v22.11.17」
dom更新到底在javascript事件循环的哪个阶段?「前端每日一题v22.11.17」昨天写了一篇文章,是javascript的事件循环机制,然后在某乎上也发了,在发的时候看到了一个问题,dom ...
js---对事件循环宏任务和微任务的理解
一.JS特点 Js作为一门单线程语言,即一次只能完成一个任务,当有多个任务时,任务就得进行排队等待执行,只能等待自己的前一个任务执行完成后自己才能执行. 二.JS事件循环要理解JS的事件循环的就必须 ...
对Boost.Asio中异步事件循环的理解
Boost.Asio是一个异步编程的网络框架, 核心的优势在于IO操作的异步调用. 异步调用时, 会用到boost::asio::io_context::run()函数, 这个函数表示启动一个IO的异 ...
网易裁员事件双方和解；华为回应「推文攻击苹果」；PHP 7.4.0 发布 | 极客头条...
整理 | 屠敏快来收听极客头条音频版吧,智能播报由标贝科技提供技术支持. 「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦,快来看今天都有哪些值得我们技术人关注 ...
TextView AutoLink, ClikSpan 与长按事件冲突的解决，Android面试真题解析火爆全网
} } } 首先调用 Linkify.addLinks 方法解析 autolink 的相关属性判断是否 mLinksClickable mLinksClickable && !tex ...
关于ajax同步异步处理循环遍历及push时发生的疑问
今天写了一个简单的ajax请求,其中因为一些需求渲染过程没有写在回调函数内,要在外部访问遍历后的数组进行渲染,第一次写时图片如下图此时console.log(arr)打印出来的内容是一个长度为0, ...

同步、异步事件循环（宏任务、微任务「大厂真题解析」）

同步、异步事件循环（宏任务、微任务「大厂真题解析」）相关推荐

最新文章

热门文章