宏任务与微任务

Blackjun 发布于2019-08-23 18:08 / 2033人阅读

摘要：引言首先大家来看个面试题哈哈哈，各位有没有很蒙圈在此先公布正确答案理论介绍要理解这个题目首先要清楚事件循环机制对于宏任务和微任务的处理。宏任务和微任务表示异步任务的两种分类。

1 引言

首先大家来看个面试题：

console.log("sync1")
setTimeout(function() {
    console.log("setTimeOut1")
},0)
var promise = new Promise(function(resolve){
    setTimeout(function() {
        console.log("setTimeoutPromise")
    }, 0)
    console.log("promise")
    resolve()
})
promise.then(() => {
    console.log("proThen")
    setTimeout(()=>{
        console.log("proThenSta")
    },0)
})
setTimeout(function() {
    console.log("lastSetTimeOut")
},0)
console.log("sync2")

哈哈哈，各位有没有很蒙圈？在此先公布正确答案：
sync1
promise
sync2
proThen
setTimeOut1
setTimeoutPromise
lastSetTimeOut
proThenSta

2 理论介绍

要理解这个题目首先要清楚事件循环机制对于宏任务和微任务的处理。宏任务和微任务表示异步任务的两种分类。在挂起任务时，JS引擎会将所有任务按照类别分到这两个队列中，首先在宏任务的队列（这个队列也被叫做 task queue）中取出第一个任务，执行完毕后取出微任务队列中的所有任务顺序执行；之后再取宏任务任务，周而复始，直至两个队列的任务都取完。
常用的宏任务：整体代码script、setTimeout、setInterval、setImmediate
常见的微任务：process.nextTick、MutationObserver、Promise.then catch finally

3 解析题目

首先第一遍同步执行，创建第一个宏任务。这时首先打印了 sync1 promise sync2
此时then函数有了一个微任务然后打印了proThen
同时创建了分别打印 setTimeOut1 setTimeoutPromise lastSetTimeOut 的三个宏任务
以及then函数里还有一个proThenSta 的宏任务
这几个宏任务分别一次执行，于是有了上面的答案

GPU云服务器云服务器定时任务与触发任务工作流任务和节点任务任务池任务堆栈

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104740.html

今天，我明白了JS事件循环机制

摘要：而这些队列由的事件循环来搞定宏任务与微任务，在最新标准中，它们被分别称为与。我们梳理一下事件循环的执行机制循环首先从宏任务开始，遇到，生成执行上下文，开始进入执行栈，可执行代码入栈，依次执行代码，调用完成出栈。写在前面 js是一门单线程的编程语言，也就是说js在处理任务的时候，所有任务只能在一个线程上排队被执行，那如果某一个任务耗时比较长呢？总不能等到它执行结束再去执行下一个。所以在...

maochunguang 2019-08-26 10:24 评论0 收藏0
JavaScript 的事件机制

摘要：的事件机制关于，查阅多篇博客，或多或少总有些出入，在此写下自己关于的理解按同步与异步分首先判断是同步还是异步同步就进入主进程异步就进入异步任务在中注册函数当满足触发条件后被推入同步任务进入主线程后一直执行直到主线程空闲时才会去中查看是否有可 JavaScript 的事件机制关于Event Loop，查阅多篇博客，或多或少总有些出入，在此写下自己关于Event Loop的理解按同步与...

Turbo 2019-08-23 11:30 评论0 收藏0
浅谈JavaScript中的事件循环机制

摘要：事件循环背景是一门单线程非阻塞的脚本语言，单线程意味着，代码在执行的任何时候，都只有一个主线程来处理所有的任务。在意识到该问题之际，新特性中的可以让成为一门多线程语言，但实际开发中使用存在着诸多限制。这个地方被称为执行栈。事件循环（Event Loop）背景 JavaScript是一门单线程非阻塞的脚本语言，单线程意味着，JavaScript代码在执行的任何时候，都只有一个主线程来...

Pluser 2019-08-23 15:22 评论0 收藏0
前端中的事件循环eventloop机制

摘要：宏任务主要有整体代码交互事件环境。按照中的定义告诉浏览器你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。总结我们要记住最重要的两点是单线程和的循环机制。 showImg(https://segmentfault.com/img/bVbsEQs?w=900&h=540); 我们知道 js 是单线程执行的，那么异步的代码 js 是怎么处理的呢？例如下面的代码是如...

jsyzchen 2019-08-26 13:46 评论0 收藏0
JavaScript事件循环(Event Loop)

摘要：事件循环的顺序，决定代码执行的顺序。输出第二轮事件循环正式结束三第三轮事件循环第三轮事件循环从宏任务开始。记为遇到，立即执行回调函数放入中注册，然后被分发到微任务事件队列中。 1、为什么要有事件循环？因为js是单线程的，事件循环是js的执行机制，也是js实现异步的一种方法。既然js是单线程，那就像只有一个窗口的银行，客户需要排队一个一个办理业务，同理js任务也要一个一个顺序执行。如...

dmlllll 2019-08-23 14:52 评论0 收藏0