JavaScript事件循环(EventLoop)

每当我感觉理解了亿点点 js 的执行过程的时候 js 都会来打我的脸

<!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>Document</title>
</head>
<body>
  <button class="btn">按钮</button>

  <script>
    const btn = document.querySelector('.btn');
    btn.addEventListener('click', function () {  
      Promise.resolve().then(()=>console.log("MicorTask 1"))
      console.log("1")
    })

    btn.addEventListener('click', function () { 
      Promise.resolve().then(()=>console.log("MicorTask 2"))
      console.log("2")
    })

    // btn.click();  // 看看代码调用和手动调用去区别吧
  </script>
</body>
</html>

// 今日头条面试题

async function async1() {
  console.log('async1 start')
  await async2()
  console.log('async1 end')
}
async function async2() {
  console.log('async2')
}
console.log('script start')
setTimeout(function () {
  console.log('settimeout')
})
async1()
new Promise(function (resolve) {
  console.log('promise1')
  resolve()
}).then(function () {
  console.log('promise2')
})
console.log('script end')

https://github.com/rhinel/blog-word/issues/4

Silence-dream / Silence-dream.github.io

JavaScript事件循环(EventLoop) #17