JS事件循环

js事件循环,它分为主任务,宏任务和微任务,它会先执行主任务,直到结束,任务再执行微任务,第一层微任务执行完毕,它会获取执行栈是否还有没执行的任务,若没有,再执行宏任务,它是一层一层去执行的
宏任务:
script(整体代码)
setTimeout, setInterval, setImmediate
微任务:
process.nextTick
Promise
MutationObserver(html5新特性)
微任务始终优先于宏任务执行,举个例子:


1.	console.log('第一次循环主执行栈开始')
2.	setTimeout(function() {
3.		console.log('第二次循环开始,宏任务队列的第一个宏任务执行中')
4.		new Promise(function(resolve) {
5.			console.log('宏任务队列的第一个宏任务的微任务继续执行')
6.			resolve()
7.		}).then(function() {
8.			console.log('第二次循环的微任务队列的微任务执行')
9.			setTimeout(() => {
10.				console.log('第三次宏任务结束')
11.			}, 0)
12.		})
13.	}, 0)
14.	new Promise(function(resolve) {
15.		console.log('第一次循环主执行栈进行中...')
16.		resolve()
17.	}).then(function() {
18.		console.log('第一次循环微任务,第一次循环结束')
19.		new Promise(function(resolve){
20.			console.log('第二次微循环执行中')
21.			resolve()
22.		}).then(function(){
23.			console.log('第二次微循环执行结束')
24.		})
25.		setTimeout(function() {
26.			console.log('第二次循环的宏任务队列的第二个宏任务执行');
27.			setTimeout(() => {
28.				console.log('ddd')
29.			},0)
30.		})
31.	})
32.	console.log('第一次循环主执行栈完成')

首先事件循环到主进程,那么就执行:“第一次循环主执行栈开始”,然后执行到setTimeout,它是宏任务,那么它就会被压到宏任务队列中,等待执行,然后执行到Promise,其回调函数并不会被放入其他任务队列,(因为它会立即执行,即是同步方法)所以打印c。Promise.then是异步事件,那么它不会在同步任务中执行,所以放入微任务执行栈中等待执行,任务打印“第一次循环主执行栈完成”,到此,第一次事件循环结束,这阶段的打印内容为:
“第一次循环主执行栈开始”->“第一次循环主执行栈进行中…”->“第一次循环主执行栈完成”

接下来第二次事件循环开始,setTimeout优先级低于promise,那么先执行Promise.then,Promise中也有一个宏任务,但是它是在Promise中的,并不是顶级栈,它是在第一层setTimeout下面的,所以它不会优先执行,那么这里就会优先执行Promise,先执行他的回调,先打印"第一次循环微任务,第一次循环结束",微任务优先宏任务执行,所以下面的Promise一起执行,打印:“第二次微循环执行中”“第二次微循环执行结束”,然后执行第一层setTimeout,打印:“第二次循环开始,宏任务队列的第一个宏任务执行中”“宏任务队列的第一个宏任务的微任务继续执行”“第二次循环的微任务队列的微任务执行”,
第二次事件循环结束,结果为:
“第一次循环微任务,第一次循环结束”->“第二次微循环执行中”->“第二次微循环执行结束”->“第二次循环开始,宏任务队列的第一个宏任务执行中”->“宏任务队列的第一个宏任务的微任务继续执行”->“第二次循环的微任务队列的微任务执行”

进行第三次事件循环:
25行的setTimeout先被压如执行栈,所以优先执行,执行“第二次循环的宏任务队列的第二个宏任务执行”,在执行第9行:“第三次宏任务结束”,最后执行“ddd”,
最后的结果是:
“第一次循环主执行栈开始”->“第一次循环主执行栈进行中…”->“第一次循环主执行栈完成”->“第一次循环微任务,第一次循环结束”->“第二次微循环执行中”->“第二次微循环执行结束”->“第二次循环开始,宏任务队列的第一个宏任务执行中”->“宏任务队列的第一个宏任务的微任务继续执行”->“第二次循环的微任务队列的微任务执行”->“第二次循环的宏任务队列的第二个宏任务执行”->“第三次宏任务结束”->“ddd”

文中采用的例子是借鉴:关于JS事件循环机制,我今天终于整明白了

JavaScript事件循环JavaScript中用于处理异步操作的机制。由于JavaScript是单线程的,它无法同时执行多个任务。为了处理异步任务,JavaScript引入了事件循环机制。 事件循环主要由以下几个组成部分: 1. 调用堆栈(Call Stack):用于存储函数调用的记录。当函数被调用时,会将其压入调用堆栈中,当函数执行完毕后,会从调用堆栈中弹出。 2. 任务队列(Task Queue):用于存储待处理的异步任务。当异步任务完成时,会被添加到任务队列中。 3. 事件循环(Event Loop):负责监听调用堆栈和任务队列的状态,当调用堆栈为空时,会从任务队列中取出任务并执行。 事件循环的工作流程如下: 1. JavaScript引擎执行同步任务,并将异步任务添加到任务队列中。 2. 当调用堆栈为空时,事件循环会从任务队列中取出一个任务。 3. 取出的任务会被压入调用堆栈中执行。 4. 执行完毕后,调用堆栈为空,事件循环继续从任务队列中取出任务执行。 这样循环执行,实现了异步任务的处理。 相关问题: 1. 什么是异步任务?为什么需要处理异步任务? 2. JavaScript如何处理异常? 3. JavaScript中的回调函数是什么?如何使用回调函数处理异步任务? 4. 什么是Promise?如何使用Promise处理异步任务? 5. JavaScript中的定时器有哪些?它们是如何工作的? 6. 什么是事件驱动编程?如何在JavaScript中使用事件驱动编程? 7. JavaScript中的Event Loop与浏览器的渲染机制有什么关系?<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* [详解JavaScript事件循环机制](https://download.csdn.net/download/weixin_38694006/13608655)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [浏览器显示数据库中数据的条形图柱状图 前后端分离vue.js+spring boot 计算机软件工程课程设计毕业设计 ...](https://download.csdn.net/download/Amzmks/88275824)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值