Ajax---EventLoop事件循环

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• EventLoop事件循环
• 一、理解浏览器中的EventLoop（事件循环）的概念
• 二、异步代码的执行过程
• 三、微任务和宏任务
  • 1.了解微任务和宏任务的概念
  • 2.掌握微任务队列和宏任务队列的执行时机
• 总结

---

前言

JavaScript 是一门单线程执行的脚本语言。也就是说，同一时间只能做一件事情。

JavaScript要运行在宿主环境中（浏览器，nodejs）下。浏览器内部有执行js代码的引擎.

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、理解浏览器中的EventLoop（事件循环）的概念

浏览器的事件循环

        排队是 任务是以事件及其回调的方式存在的。当事件（用户的点击，图片的成功加载）发生时，将其回调添加到任务队列；主线程上的任务完成之后，就会从任务队列中取出任务来执行.

浏览器中的EventLoop事件循环:

        js是单线程的，一次只能做一件事。js在浏览器这个宿主环境中运行。浏览器是多线程的，用户交互，定时器，网络请求等等浏览器中的事件会产生对应的任务，任务多了要在任务队列中排队，浏览器的主线程依次取出任务来执行，此过程不断重复从而形成一个循环，称为EventLoop.

二、异步代码的执行过程

       代码又为同步代码和异步代码,事件循环中先执行同步代码，并输出结果；遇到异步代码之后，交由浏览器（宿主环境）处理 ===> 事件触发之后进入到任务队列;继续执行后续代码；主线程空闲时，从任务队列中取出任务继续执行.

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

三、微任务和宏任务

1.了解微任务和宏任务的概念

微任务代码（js语法）

• Promise对象.then()

宏任务代码（宿主环境）

• script
• dom事件
• ajax
• setTimout

2.掌握微任务队列和宏任务队列的执行时机 

       异步任务,不是马上执行，是放入到队列中等待；如果所有的任务都要按序等待，那么也不行，需要有一个能插队的机制。所以又将异步任务分为微任务和宏任务，同时对应微任务队列和宏任务队列。当主线程空闲时，先执行微任务队列中的任务，再去执行宏任务队列中的任务。

console.log(1);

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

let p = new Promise((resolve, reject) => {
    resolve(3)
})

p.then(res => {
    console.log(res);
})


console.log(4);

微任务和宏任务以及同步代码是如何执行的?

• 先执行第一个宏任务(<script>), 然后同步任务, 然后微任务, 然后下一个宏任务如此循环, 直到所有代码执行完毕

---

总结

        EventLoop事件循环: js是单线程的，一次只能做一件事。js在浏览器这个宿主环境中运行。浏览器是多线程的，用户交互，定时器，网络请求等等浏览器中的事件会产生对应的任务，任务多了要在任务队列中排队，浏览器的主线程依次取出任务来执行，此过程不断重复从而形成一个循环，称为EventLoop.