event-loop 事件循环机制

  • js语言的特点 单线程 解释性语言
  • event-loop 事件循环机制 由三部分组成: 调用栈、微任务队列、消息队列,
    (1)event-loop开始的时候,会从全局一行一行的执行,遇到函数调用会压入到调用栈中,被压入的函数被称之为帧,当函数返回后会从调用栈中弹出。
  function fun1() {
    console.log(1);
  }
  function fun2() {
    console.log(2);
    fun1();
    console.log(3);
  }
  fun2();// 2 1 3

(2)js中的异步操作,比如fetch、setTimeout、setInterval。压入到调用栈中的时候里面的消息会进去到消息队列中去,消息队列中会等到调用栈清空之后再执行。

 function fun1() {
    console.log(1);
  }
  function fun2() {
    setTimeout(() => {
      console.log(2);
    }, 0);
    fun1();
    console.log(3);
  }
  fun2(); // 1 3 2

(3)promise async await异步操作的时候会加入到微任务中去,会在调用栈清空的时候立即执行

  const p = new Promise((resolve) => {
    //调用栈中加入的微任务会立马执行
    console.log(4);
    resolve(5);
  });
  function fun1() {
    console.log(1);
  }
  function fun2() {
    setTimeout(() => {
      console.log(2);
    }, 0);
    fun1();
    console.log(3);
    p.then((resolve) => {
      console.log(resolve);
    });
  }
//微任务优先消息队列执行
  fun2(); //4 1 3 5 2
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容