JS面试八股文（三）

😊各位小伙伴们，本专栏新文章出炉了！！！

---

21.说一下事件循环

事件循环的主要任务是在JavaScript单线程环境下管理任务的执行，JavaScript本身是单线程的，这意味着任何时刻也只能执行一个任务。为了处理并发操作（如网络请求、用户输入等），JavaScript引入了事件驱动的机制。

事件循环的工作流程

1. 调用栈：用来存放函数调用的信息。每当一个函数被执行时，就会在调用栈中添加一个条目；当函数执行完毕后，就会从调用栈中移除该条目。调用栈为空表示当前没有正在执行的函数。
2. 任务队列：用来存放待执行的任务。当一个任务（通常是异步任务）准备好执行时，会被加入到任务队列中等待执行。
3. Web APIs：浏览器提供的API，如setTimeout、setInterval、fetch、XMLHttpRequest等，这些API通常会执行异步操作，并且在操作完成后将相应的任务放入任务队列。
4. 事件循环：不断地检查调用栈是否为空，并且任务队列是否有待执行的任务，如果调用栈为空并且任务队列中有任务，则将任务队列中的第一个任务取出，并压入调用栈中执行。

事件循环的执行流程

1. 同步任务：当JavaScript代码执行时，首先会执行所有的同步任务。每个同步任务都会进入调用栈，执行完毕后退出调用栈。
2. 异步任务：当遇到异步任务时，如setTimeout或fetch，这些任务会被委托给浏览器或者其他Web API来处理。一旦异步任务完成，就会生成一个待执行的任务，并将其放入任务队列。
3. 检查调用栈：事件循环会持续检查调用栈是否为空，如果调用栈为空，并且此时任务队列中有任务，事件循环会从任务队列中取出第一个任务，并将其压入调用栈中执行。
4. 循环队列：上述过程会不断地重复，直到所有任务都执行完毕。

微任务和宏任务

在事件循环的过程中，还需要区分两种类型的任务。

• 宏任务：如SetTimeout、SetInterval、DOM事件、I/O、UI渲染等。
• 微任务：如Promise、MutationObserver、process.nextTick等

微任务会在当前宏任务的JS代码执行结束后立即执行，不需要等待下一轮的事件循环，也就是说，每个宏任务的结束阶段，都会先清空所有的微任务队列。

<script>
  console.log("开始")

  setTimeout(()=>{
     
    console.log("SetTimeout开始执行！")
  },0)

  Promise.resolve().then(()=>{
     
    console.log("Promise开始执行！")
  })

  setInterval(()=>{
     
    console.log("setInterval开始执行！")
  },5)

  console.log("结束")
</script>

在这个例子中，首先打印开始和结束，因为他们是同步任务，然后Promise的回调会在当前宏任务结束时立即执行，最后，SetTimeout和setInterval的回调会在下一论事件循环中执行。

22.ajax是什么？怎么实现？

Ajax是一种用于创建快速动态网页的技术，通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新，也就是说可以在不重新加载整个页面的情况下，对页面的某部分进行更新。

Ajax的基本原理

Ajax的核心就是在于使用XMLHttpRequest对象来与服务器通信，当用户触发Ajax请求时，JavaScript会创建一个新的XMLHttpRequest对象，并通过这个对象向服务器发送请求。服务器端收到请求后再进行处理，并返回相应数据。JavaScript再次使用XMLHttpRequest对象获取相应数据，并根据返回的数据更新页面的部分内容。

Ajax的实现

1. 使用原生的XMLHttpRequest

这是最基本的AJAX实现方式，适用于所有浏览器，并且不需要任何外部库。

<script>
  function ajaxGet(url, callback) {
     
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
     
      if(xhr.readyState === 4 &&