zoukankan      html  css  js  c++  java
  • 最简单的几句话说清楚JS的执行机制

      1. 先执行同步代码
      1. 后执行异步代码
      1. 先执行同层级微任务
      1. 再执行同层级宏任务
      1. 同步代码都是宏任务
      1. 异步任务有宏任务有微任务

    宏任务主要有:script(整体代码)、setTimeout、setInterval、I/O、UI 交互事件、postMessage、MessageChannel、setImmediate(Node.js 环境)。

    微任务主要有:Promise.then、 MutationObserver、 process.nextTick(Node.js 环境)。

    console.log(1);
    setTimeout(function() {
        console.log(2);
    }, 0);
    new Promise(function(resolve) {
        console.log(3);
        resolve(Date.now());
    }).then(function() {
        console.log(4);
    });
    console.log(5);
    setTimeout(function() {
        new Promise(function(resolve) {
            console.log(6);
            resolve(Date.now());
        }).then(function() {
            console.log(7);
        });
    }, 0);
    

    执行步骤如下:

    • 1.执行 log(1),输出 1;

    • 2.遇到 setTimeout,将回调的代码 log(2)添加到宏任务中等待执行;

    • 3.执行 console.log(3),将 then 中的 log(4)添加到微任务中;

    • 4.执行 log(5),输出 5;

    • 5.遇到 setTimeout,将回调的代码 log(6, 7)添加到宏任务中;

    • 6.宏任务的一个任务执行完毕,查看微任务队列中是否存在任务,存在一个微任务 log(4)(在步骤 3 中添加的),执行输出 4;

    • 7.取出下一个宏任务 log(2)执行,输出 2;

    • 8.宏任务的一个任务执行完毕,查看微任务队列中是否存在任务,不存在;

    • 9.取出下一个宏任务执行,执行 log(6),将 then 中的 log(7)添加到微任务中;

    • 10.宏任务执行完毕,存在一个微任务 log(7)(在步骤 9 中添加的),执行输出 7;

    因此,最终的输出顺序为:1, 3, 5, 4, 2, 6, 7;

    参考链接:前端中的事件循环eventloop机制
    这次,十分钟把宏任务和微任务讲清楚
    这一次,彻底弄懂 JavaScript 执行机制

  • 相关阅读:
    poi 导出Excel
    【EasyUI】combotree和combobox模糊查询
    多线程和Socket套接字
    io流
    前端页面的语法 jquery javascript ajax
    spring+mybatis
    Exchanger 原理
    CountDownLatch、CyclicBarrier和 Semaphore
    sleep() 、join()、yield()有什么区别
    创建线程的方式及实现
  • 原文地址:https://www.cnblogs.com/yangAL/p/14386344.html
Copyright © 2011-2022 走看看