zoukankan      html  css  js  c++  java
  • javascript之事件循环机制

    macro-task(宏任务):包括整体代码script,setTimeout,setInterval

    micro-task(微任务):Promise,process.nextTick

    整体script作为第一个宏任务进入主线程执行,遇到promise,new Promise立即执行;.then分发到微任务中;遇到setTimeout、setInterval,将其回调函数分发到宏任务中;第一个script作为第一个宏任务被执行完后,查看是否有微任务,如果有则执行微任务,执行完微任务则第一轮事件循环结束;开始第二轮事件循环,仍从宏任务开始,从宏任务队列中拿出一个宏任务进行执行,发现定时器回调函数,立即执行(执行顺序同上),执行完以后继续从宏任务队列中拿出一个宏任务继续执行。无限循环,直至任务全部执行完毕

    示例:

            console.log('执行开始 1');//1 第一轮事件循环宏任务第一次打印
            setTimeout(function() {
                console.log('setTimeout1执行 6');//6 第二轮事件循环宏任务第一次打印 -- 至此第二轮事件循环结束
            },0);
            setTimeout(function() {
                new Promise(function(resolve){
                    console.log('setTimeout2中的promise 7');//7 第三轮事件循环宏任务第一次打印
                }).then(function(){
                    console.log('setTimeout2中的promise.then执行 9');//9 第三轮事件循环微任务第一次打印 -- 至此所有事件循环结束,代码执行完成
                });
                console.log('seTimeout2中promise后面的console执行     8');//8 第三轮事件循环宏任务第二次打印
            },0)
            console.log('代码中间段console执行 2');//2 第一轮事件循环宏任务第二次打印
            Promise.resolve().then(function() {
                console.log('promise执行.then1执行 4');//4 第一轮事件循环微任务第一次打印
            }).then(function() {
                console.log('promise.then2执行 5');//5 第一轮事件循环微任务第二次打印 -- 至此第一轮事件循环结束,进入第二轮事件循环
            })
            console.log('执行最后一行代码 3');//3 第一轮事件循环宏任务第三次打印
  • 相关阅读:
    对于软件工程这门课程的一些心得
    第一次冲刺(10)
    第一次冲刺(7~9)
    第一次冲刺(6)
    第一次冲刺(5)
    第一次冲刺(4)
    第一次冲刺(3)
    第一次冲刺(2)
    Arrays.asList 为什么不能 add 或者 remove 而 ArrayList 可以
    Javascript保证精度的小数乘法
  • 原文地址:https://www.cnblogs.com/emilyzz/p/14073965.html
Copyright © 2011-2022 走看看