js在浏览器中的event loop事件队列示例详解

来源：互联网收集：自由互联发布时间：2022-04-19

目录前言认识一个栈两个队列执行过程简单例子难一点的例子总结前言以下内容是js在浏览器中的事件队列执行，与在nodejs中有所区别，请注意。都说js是单线程的，不过它本身其

前言

以下内容是js在浏览器中的事件队列执行，与在nodejs中有所区别，请注意。

都说js是单线程的，不过它本身其实不是单线程，但是在浏览器中执行时只分配一个线程进行执行。

所以说js执行是单线程的，一次只能进行一项任务，就是一件任务一件任务做，做完一件做下一件。

认识一个栈两个队列

一个调用栈Stack。

一个宏队列，macrotask，也叫tasks。

一个微队列，microtask，也叫jobs。

执行过程

js就是执行全局Script同步代码，这中间碰到一些异步任务先加进对应的队列。

做完之后，调用栈就为空了。

然后将队列(先微队列后宏队列)里面的首个任务提到调用栈来做，一件一件做完直到队列中的任务都做完。

总结就是，先做同步的任务，再做微队列的任务，再做宏队列的任务。

异步任务怎么分配

这些异步任务包括但不限于：

以下分配给宏队列：

setTimeout
setInterval
requestAnimationFrame
I/O
UI rendering

以下分配给微队列：

Promise
Object.observe
MutationObserver

常见的宏队列：setTimeout，常见的微队列：Promise。

简单例子

    console.log("同步任务1");

    setTimeout(() => {
      console.log("宏任务");
    });

    new Promise((resolve, reject) => {
      console.log("同步任务2");
      resolve("微任务");
    }).then((data) => {
      console.log(data);
    });

    console.log("同步任务3");

结果是（按标号加任务，按箭头执行）:

需要注意的是Promise的第一层没有执行回调之前是同步的，也就是上面的同步任务2。

难一点的例子

    console.log("同步任务1");

    console.log("同步任务2");

    new Promise((resolve, reject) => {
      console.log("同步任务3");
      setTimeout(() => {
        console.log("宏任务1");
        Promise.resolve()
          .then(() => {
            console.log("微任务5");
          })
          .then(() => {
            console.log("微任务6");
          });
      });
      resolve("微任务1");
    })
      .then((data) => {
        console.log(data);
        return "微任务3";
      })
      .then((data) => {
        console.log(data);
      });

    setTimeout(() => {
      console.log("宏任务2");
    }, 0);

    new Promise((resolve, reject) => {
      resolve("微任务2");
    })
      .then((data, resolve) => {
        console.log(data);
        return "微任务4";
      })
      .then((data) => {
        console.log(data);
      });

    console.log("同步任务4");

如何看呢，先看第一层，红色代表同步，绿色微任务，蓝色宏任务。

我们会把同步任务执行完，然后看见微任务有俩，宏任务也有俩。

本来的执行顺序可能是这样（我这里按照序号来表达顺序了，请和简单例子区分开来）：