关于 js eventLoop 打印顺序的问题

第一段代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button>测试</button>
</body>
<script>
   const button = document.querySelector('button')
   button.addEventListener('click',()=>{
     Promise.resolve().then(()=>console.log('Microtask 1'))
     console.log('Listener 1')
   })
   button.addEventListener('click',()=>{
     Promise.resolve().then(()=>console.log('Microtask 2'))
     console.log('Listener 2')
   })
</script>

</html>

点击测试按钮 打印顺序

Listener 1 - Microtask 1 - Listener 2 - Microtask 2

第二段代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button>测试</button>
</body>
<script>
   const button = document.querySelector('button')
   button.addEventListener('click',()=>{
     Promise.resolve().then(()=>console.log('Microtask 1'))
     console.log('Listener 1')
   })
   button.addEventListener('click',()=>{
     Promise.resolve().then(()=>console.log('Microtask 2'))
     console.log('Listener 2')
   })
   button.click()
</script>

</html>

直接用代码触发单机事件 顺序

Listener 1 - Listener 2 - Microtask 1 -  Microtask 2

求大佬 有没有形象生动的解释~看了几遍视频 还是云里雾里的 附上原视频连接
https://www.youtube.com/watch...

阅读 1.3k
1 个回答
新手上路,请多包涵

可以用queueMicrotask手动的向微任务队列添加任务,这样更好理解一点。只有微任务队列清空之后,才会执行宏任务队列

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题