✨ JS的事件循环

1. 事件循环（EventLoop）：掌握后知道 JS 是如何安排和运行代码的

   请回答下面 2 段代码打印的结果，并说明原因

   console.log(1)
   setTimeout(() => {
    console.log(2)
   }, 2000)

   console.log(1)
   setTimeout(() => {
    console.log(2)
   }, 0)
   console.log(3)

   两段代码结果都是132

2. 作用：事件循环负责执行代码，收集和处理事件以及执行队列中的子任务
3. 原因：JavaScript 单线程（某一刻只能执行一行代码），为了让耗时代码不阻塞其他代码运行，设计了事件循环模型

4. 概念：执行代码和收集异步任务的模型，在调用栈空闲，反复调用任务队列里回调函数的执行机制，就叫事件循环

   /**
   * 目标：阅读并回答执行的顺序结果
   */
   console.log(1)
   setTimeout(() => {
    console.log(2)
   }, 0)
   console.log(3)
   setTimeout(() => {
    console.log(4)
   }, 2000)
   console.log(5)

   

8. 事件循环-练习

1. 需求：请根据掌握的事件循环的模型概念，分析代码执行过程

   /**
   * 目标：阅读并回答执行的顺序结果
   */
   console.log(1)
   setTimeout(() => {
    console.log(2)
   }, 0)
   function myFn() {
    console.log(3)
   }
   function ajaxFn() {
    const xhr = new XMLHttpRequest()
    xhr.open('GET', 'http://hmajax.itheima.net/api/province')
    xhr.addEventListener('loadend', () => {
      console.log(4)
    })
    xhr.send()
   }
   for (let i = 0; i < 1; i++) {
    console.log(5)
   }
   ajaxFn()
   document.addEventListener('click', () => {
    console.log(6)
   })
   myFn()

结果：1 5 3 2 4 点击一次document就会执行一次打印6