关于 js eventLoop 打印顺序的问题_编程技术网-程序员技术内容聚合平台

（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)

第一段代码

<!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...

###

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