<!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>
<body>
<script>
console.log(1) // 同步代码
// setTimeout是宏任务,交给浏览器环境执行
// 浏览器看到超时时间是0,所以setTimeout中的回调会被推入到宏任务队列排队
setTimeout(() => {
console.log(2)
const p = new Promise(resolve => resolve(3))
p.then(result => console.log(result))
}, 0)
// new Promise本身是同步的
const p = new Promise(resolve => {
// setTimeout会被放入浏览器环境执行。浏览器看到定时器时间是0,立即放入宏任务队列排队
setTimeout(() => {
console.log(4)
}, 0)
resolve(5) // 同步代码,Promise p的状态立即变成完成状态
})
// p.then本身是同步的,但then内的回调函数是异步的,等Promise成功以后推入到微任务队列中排队
p.then(result => console.log(result))
// Promise p2的状态立即变为完成状态
const p2 = new Promise(resolve => resolve(6))
// p2.then中的回调函数进入微任务队列排队
p2.then(result => console.log(result))
console.log(7) // 同步代码
</script>
</body>
</html>
控制台打印的结果,反映了代码的执行顺序: