• (flag)每日面试题-JavaScript 执行机制,宏任务,微任务


    JavaScript 执行机制,宏任务,微任务
    1.js是一门单线程语言 浏览器是多线程的
    2.同步进入主线程
    3.异步进入Event Table并注册函数,当指定的事情完成时,Event Table会将这个函数移入到Event Queue中,主线程任务执行完毕之后 会去Event Queue读取相应的函数 上面这个过程会不断的重复,也就是Event Loop(事件循环)
    事件循环:scrip是一个宏观任务 宏观任务结束之后 才会去执行下一个宏观任务,其中如果有微观任务会去执行所有的微观任务,执行完毕所有的微观任务之后,执行下一个宏观任务
    宏观任务
    macro-task(宏任务):包括整体代码script,setTimeout,setInterval
    微观任务
    micro-task(微任务):Promise,process.nextTick(process.nextTick()的意思就是定义出一个动作,并且让这个动作在下一个事件轮询的时间点上执行)
    如下代码解析:

    console.log('1');
    
    setTimeout(function() {
        console.log('2');
        process.nextTick(function() {
            console.log('3');
        })
        new Promise(function(resolve) {
            console.log('4');
            resolve();
        }).then(function() {
            console.log('5')
        })
    })
    process.nextTick(function() {
        console.log('6');
    })
    new Promise(function(resolve) {
        console.log('7');
        resolve();
    }).then(function() {
        console.log('8')
    })
    
    setTimeout(function() {
        console.log('9');
        process.nextTick(function() {
            console.log('10');
        })
        new Promise(function(resolve) {
            console.log('11');
            resolve();
        }).then(function() {
            console.log('12')
        })
    })
    

    第一个宏观任务:
    1.第一个宏观任务script 作为整体进入主线程 遇到console.log('1') 输出1
    2.遇到setTimeout,宏观任务(现在第一个宏观任务script还没有执行完毕 会分配到宏观任务中 暂时还不会执行)
    3.遇到下面的process.nextTick 分配到微观任务中
    4.遇到Promise,new Promise直接执行,输出7。then被分发到微任务Event Queue中 5.此时的微观任务表中:process.nextTick,Promise.then 则执行结果为 6 8
    第一个宏观任务 执行结果 : 1 7 6 8
    第二个宏观任务:
    1.第二个宏观任务是第一个setTimeout
    2.跟script的执行顺序是一样的 碰到console.log('2') 执行2 process.nextTick会分配到微观任务 Promise会立即执行 然后.then分配到微观任务
    输出结果:2 4 3 5
    第三个宏观任务:
    第三个宏观任务就是第二个setTimeout 和第二个宏观任务执行顺序一样
    输出结果 9 11 10 12

    练习题1:

    // 宏观任务  setTimeout 
    // 微观任务    async1 .then .then
    
        console.log('script start')//1
        async function async1() { //async 语法糖 async2()执行完毕 才执行下面 会加入在微观任务里面
            await async2()
            console.log('async1 end') //5
        }
        async function async2() {
            console.log('async2 end') //2
        }
        async1()
    
        setTimeout(function () {
            console.log('setTimeout') // 8
        }, 0)
    
        new Promise(resolve => {
            console.log('promise') //3
            resolve()
        }).then(function () {
            console.log('promise1') //6
        }).then(function () {
            console.log('promise2') //7
        })
    
        console.log('script end') //4
    

    练习题2:

      async function async1() {
            console.log(1);
            const result = await async2();
            console.log(3);
        }
    
        async function async2() {
            console.log(2);
        }
    
        Promise.resolve().then(() => {
            console.log(4);
        });
    
        setTimeout(() => {
            console.log(5);
        });
    
        async1();
        console.log(6);
    
  • 相关阅读:
    量子算法抛转(以及Oracle函数初步)
    量子计算中的幺正操作符和干涉现象
    2个qubit的量子门
    量子计算提前填坑
    单qubit量子门
    入职互联网公司工作以后的一些思考
    善用string.Format
    iOS开发学习笔记 self和super的区别
    当姿态估计算法遇上《本草纲目》,看“刘畊宏男孩”如何驱动虚拟人
    AliAGC 自动增益控制算法:解决复杂场景下的音量问题
  • 原文地址:https://www.cnblogs.com/halfsoul/p/12781675.html
Copyright © 2020-2023  润新知