JS之宏任务与微任务

文章目录

前话
宏任务和微任务包括哪些
执行流程图
易错例题
引例

前话

任务队列中的异步任务分为：宏任务和微任务
宏任务和微任务都是异步任务，都在任务队列中，但是它们在不同的队列中
*重点：在准备取出每个宏任务准备执行前要执行完所有的微任务

宏任务和微任务包括哪些

宏任务
- 1. setTimeout
- 1. setInterval
- 1. I/O
- 1. 事件
- 1. postMessage
- 1. setImmediate (node中的特性，浏览器已经废弃该API)
- 1. requestAnimationFrame
- 1. UI渲染
微任务
- 1. Promise.then
- 1. MutationObserver
- 1. process.nextTick (node中)

执行流程图

易错例题

console.log('开始')new Promise((resolve, reject) => {console.log(1)resolve()
}).then(() => {console.log(2)return new Promise((resolve, reject) => {  // 在这里返回promise，则第一个promise的第二个then方法会置于这个promise的then方法之后，所有先输出 【4】，再输出 【5】console.log(3)resolve()}).then(() => {console.log(4)})
}).then(() => {console.log(5)
})console.log('结束')

上述的代码中会依次输出：开始 1 结束 2 3 4 5
首先输出开始，接着是一个promise构造函数，执行执行器函数，输出【1】
继续执行同步代码，输出【结束】
同步代码全部执行完毕，然后执行任务队列中的逻辑，输出【2】和【3】

引例

console.log('开始')setTimeout(() => {console.log('定时器执行')
}, 0);new Promise((resolve, reject) => {resolve('佩奇')
}).then((data)=>{console.log(data)
})console.log('结束')// 依次输出：开始 结束 佩奇 定时器执行

*重点：在准备取出每个宏任务准备执行前要执行完所有的微任务

JS之宏任务与微任务相关推荐

js的宏任务和微任务
js是单线程的,同一时刻只能干一件事异步代码会放到任务队列任务队列分为宏任务和微任务微任务优先于宏任务执行 promise放在微任务队列中 setTimeout(() => {consol ...
JS面试——宏任务与微任务
JavaScript的宏任务与微任务 1.问题的由来 2.JavaScript的宏任务与微任务 2.1promise的使用方法 2.2async与await的使用方法 3.面试题实战分析--程序执行顺 ...
辉太郎看前端(js异步宏任务和微任务)
前言宏任务:setTimeout,setInterval,Ajax,DOM事件微任务:Promise,async/await. 优先级:微任务执行要比宏任务要早. 注: 同步任务会和微任务按照出场 ...
js的事件循环机制：同步与异步任务（setTimeout，setInterval）宏任务，微任务（Promise，process.nextTick）...
javascript是单线程,一切javascript版的"多线程"都是用单线程模拟出来的,通过事件循环(event loop)实现的异步. javascript事件循环事件循环 ...
js中的事件循环和宏任务和微任务的理解
参考许多大神的文章,写下自己的理解事件循环: 说到事件循环就得谈到js中同步和异步的执行顺序 1.javascript将任务分为同步任务和异步任务,同步任务放到主线中,异步函数首先进行回调函数注册. ...
js的事件循环机制，同步和异步，以及宏任务与微任务的执行顺序
前置知识点(重要): 1.什么是事件循环:js是单线程语言,同个时间执行一件事(同步),但是他可以有一个异步队列,遇到异步操作(比如说ajax这种阻塞时间很久的事情)把它们先放入异步队列,并且继续往下 ...
❤️一起谈一谈js中的宏任务和微任务！
前面面试的文章中我们说过一道关于宏任务和微任务的题: setTimeout(function(){console.log('1') });new Promise(function(resolve){c ...
js 中的 Event Loop 以及宏任务与微任务
目录前言 1.JS 的执行引擎与执行环境 2.js 是单线程的一.事件循环(Event Loop) 二.任务队列三.宏任务与微任务 1.宏任务 2.微任务 3.宏任务与微任务的运行机制 ...
一篇文章理解JS中同步任务和异步任务以及宏任务与微任务的原理和执行机制
前言: javascript是一种单线程编程语言, 一般来说它的执行顺序是按照从上到下执行,但是有些特殊情况则会改变这样的执行顺序,我们需要理解和掌握其中的原理,需要了解同步任务和异步任务以及宏任务和 ...

JS之宏任务与微任务

文章目录

前话

宏任务和微任务包括哪些

执行流程图

易错例题

引例

JS之宏任务与微任务相关推荐

最新文章

热门文章