事件循环（EventLoop）& 异步代码的执行过程

事件循环（EventLoop）

• 浏览器的事件循环—（不能说javascript的事件循环）
• 任务是以事件及其回调的方式存在的。当事件（点击、图片的成功加载）发生时，将其回调添加到任务列表；主线程上的任务完成后，就会从任务队列中取出来任务执行，此过程不断重复从而形成一个循环
• 自己理解：一段代码从上往下执行，js是单线程的，调用分为同步异步。js在浏览器宿主环境中执行，浏览器是多线程。那么一段代码在浏览器运行应该是先整个script 排队在任务队列里，然后浏览器主线程空闲时，任务1就会进入线程中开始运行，同步任务先依次从上往下执行输出，异步任务如定时器会由浏览器来进行调用，并将其回调推入任务队列进行排队，等主线程为空，也就是同步任务执行完，会进行下一个任务，才会执行比如定时器等异步任务。任务结束后再次调用下一个任务形成循环，也就是事件循环
• 名词：事件循环、主线程、任务队列
  • 事件循环：注册监听事件、定时器、AJAX请求等，当其发生时，会将回调添加到任务队列中
  • 主线程：浏览器是多线程的，主线程执行任务队列中的任务
  • 任务：script、网络请求、定时器任务等都是一个个任务
  • 任务队列：存放任务的队列，按照顺序依次添加并依次进入到主线程里执行。（有插队机制-宏微任务对列）

---

异步代码的执行过程

<script>
	console.log(1)
  setTimeout(()=>{
    console.log(2)
  }, 2000)
  console.log(3)
  </script>

1. 浏览器任务队列中<script>整体放入任务队列进行排队，等主线程空闲，会开始执行<script>
2. 同步任务会直接输出，控制台打印 1 3
3. 异步任务定时器会由浏览器定时2秒将回调任务推入任务队列

4. 等<script>的同步代码执行完毕后（图中叉掉了），再进行下一个任务，执行，打印2

由此，执行出来的结果就是 1 3 2

如图：

总结：先执行同步代码，并输出结果；

遇到异步代码之后，交由浏览器（宿主环境）处理 ===> 事件触发之后进入到任务队列继续执行后续代码；

主线程空闲时，从任务队列中取出任务继续执行；