JavaScript 基础：异步

栏目: JavaScript · 发布时间: 5年前

内容简介：今天，我们要讲的是 JS 异步的知识，包括事件循环、执行栈、任务队列、宏任务、微任务。一个记录函数调用的数据结构。当函数被调用时，会被 push 进栈顶；执行完返回时，从栈顶 pop 出。Javascript 主线程中只有一个执行栈，负责顺序执行主线程中代码。

今天，我们要讲的是 JS 异步的知识，包括事件循环、执行栈、任务队列、宏任务、微任务。

JavaScript 基础：异步

执行栈

一个记录函数调用的数据结构。当函数被调用时，会被 push 进栈顶；执行完返回时，从栈顶 pop 出。Javascript 主线程中只有一个执行栈，负责顺序执行主线程中代码。

JavaScript 基础：异步

上图先调用 a（push a 到栈），a 再调用 b（push b 到栈），所以报错信息里的 error stack 是 b->a->主函数；

如果上图不报错，那么：b 执行完了被 pop 出，然后 a 执行完了被 pop 出。

任务队列

一个记录异步事件回调的队列数据结构。当有外部的异步事件 (setTimeout、ajax 等请求) 时，相应的回调函数会按照先后顺序存放在任务队列中。

宏任务与微任务

ES6 之前任务比较简单只有 setTimeout / ajax 这类 web api 生成的异步事件，所有的这些内容都会被存放到事件队列中，我们称之为异步任务。后来 ES6 中引入了 Promise 之后，异步任务之间存在差异，执行的优先级也有区别。分为两类：微任务和宏任务。

宏任务：整体代码 script 、setTimeout、setInterval、DOM 操作、ajax；微任务：Promise、async / await

事件循环

从宏任务队列的队头中拿出一个任务放到执行栈里执行；
中途遇到异步，就另外执行异步，并把回调函数放到宏任务或者微任务队列中；
执行完了，检查微任务队列，有就清空它（也就是放到执行栈里执行它）；
微任务清空了，回到第一步。

JavaScript 基础：异步

面试题：promise 与 setTimeout

下面代码的执行顺序是啥？

setTimeout(function() {
    console.log('setTimeout');
}, 0);

new Promise(function(resolve) {
    console.log('promise');
    resolve();
}).then(function() {
    console.log('then');
});

console.log('console');

答：promise console then setTimeout

以上所述就是小编给大家介绍的《JavaScript 基础：异步》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

HTTP/2基础教程

Stephen Ludin、Javier Garza / 罗正龙、郑维智 / 人民邮电出版社 / 2018-1 / 49.00元

让网站和应用更快速、更简洁、更稳健，从而有效提升用户体验，这无疑是众多开发者梦寐以求的。然而互联网发展日新月异，HTTP/1.1协议已经难以满足现今的需求。在众多Web性能提升方案中，HTTP/2值得尝试。本书是HTTP/2实用指南，介绍了HTTP/2的设计初衷和新特性，以及如何才能充分利用这些特性来打造高性能网站及应用。作者用定量分析方法，对比了不同网络环境下及不同浏览器上HTTP/1.......一起来看看《HTTP/2基础教程》这本书的介绍吧!

码农工具