<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件循环</title>
</head>
<!-- 认识事件循环的好处：掌握JavaScript是如何安排和运行代码的 。
概念：JavaScript有一个事件循环的并发模型，事件循环负责执行代码，收集和处理事件以及执行队列中的子任务。
原因：JavaScript单线程（某一时刻只能执行一行代码），为了让耗时代码不阻塞其他代码运行，设计了事件循环模型。
执行过程：执行代码和收集异步任务的模型，在调用栈空闲，反复调用任务队列里的回调函数执行机制，就叫事件循环
执行同步代码，遇到异步代码交给宿主浏览器环境执行，当异步代码有了结果后，把回调函数放入任务队列排队，当调用栈空闲后，反复调用任务队列里的回调函数
-->
<!-- 宏任务与微任务
异步任务分为：宏任务与微任务
宏任务：由浏览器环境执行的异步代码
如：
1.JS脚本执行事件（script）
2.setTimeout/setInterval
3.AJAX请求完成事件
4.用户交互事件等
微任务：由JS引擎环境执行的异步代码
Promise对象.then（）
Promise本身是同步的，而then和catch回调函数是异步的
-->
<!-- 当执行栈空闲时，清空微任务队列，再执行下一个宏任务 -->
<body>
<script>
/**
* 目标：阅读并回答执行的顺序结果
*/
console.log(1)
setTimeout(() => {
console.log(2)
}, 0)
console.log(3)
setTimeout(() => {
console.log(4)
}, 2000)
console.log(5)
// 1 3 5 2 4
</script>
<script>
/**
* 目标：阅读并回答打印的执行顺序
*/
console.log(1)
setTimeout(() => {
console.log(2)
}, 0)
const p = new Promise((resolve, reject) => {
resolve(3)
})
p.then(res => {
console.log(res)
})
console.log(4)
// 1 4 3 2
</script>
</body>
</html>
扫一扫
8884
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
