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 第一轮事件循环宏任务第三次打印
posted @ 2020-12-02 15:15  #青橙#  阅读(69)  评论(0编辑  收藏  举报