• 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 第一轮事件循环宏任务第三次打印
  • 相关阅读:
    HTML5基础内容(二)
    JavaScript逻辑运算符
    JavaScript自增运算符和自减运算符
    JavaScript算数运算符和一元运算符
    CSS分页
    HTML和CSS遇到的细节问题
    JavaScript数据类型转换
    JavaScript标识符
    HTML5基础知识汇总(一)
    CSS颜色透明度
  • 原文地址:https://www.cnblogs.com/emilyzz/p/14073965.html
Copyright © 2020-2023  润新知