JavaScript 基础：异步

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

内容简介：今天，我们要讲的是 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 基础：异步》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

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

码农书籍

Java Web开发实战经典（基础篇）

李兴华、王月清 / 清华大学出版社 / 2010-8 / 69.80元

本书用通俗易懂的语言和丰富多彩的实例，通过对Ajax、JavaScript、HTML等Web系统开发技术基础知识的讲解，并结合MVC设计模式的理念，详细讲述了使用JSP及Struts框架进行Web系统开发的相关技术。全书分4部分共17章，内容包括Java Web开发简介，HTML、JavaScript简介，XML简介，Tomcat服务器的安装及配置，JSP基础语法，JSP内置对象，Java......一起来看看《Java Web开发实战经典（基础篇）》这本书的介绍吧!

码农工具