Javascirp异步编程

在上一篇彻底弄清Javascirpt中的同步和异步一问当中，介绍了Javascirp代码执行的概念，同步和异步的原理。

学习过Javascript语言的同学都知道，从Javascript诞生之日起，就是一门单线程、非阻塞的脚本语言。Javascript代码在执行的时候，都有一个主线程来处理所有任务，非阻塞就是靠异步编程，即事件循环（Event loop）。

本文将向大家讲述，在js当中如何实现异步编程的。

在本文之前先了解一下队列的概念

队列 （queue）

队列的特点是是"FIFO，即先进先出（First in, first out）" 。
数据存取时"从队尾插入，从队头取出"。

"与栈的区别：栈的存入取出都在顶部一个出入口，而队列分两个，一个出口，一个入口"。

JS为何需要异步？

for (var i=0;i<9999;i++){
  console.log("我在执行 但用户不知道")
}
console.log("你好啊")

上图例子 for循环耗时会很久

这意味着 用户得不到 '你好啊' 的响应 就会下意识会认为浏览器卡死了 所以js必须要有异步。

JS事件的循环

js通过事件循环来实现异步 这也是js的运行机制

调用栈中的同步任务都执行完毕，栈内被清空了，就代表主线程空闲了，这个时候就会去任务队列中按照顺序读取一个任务放入到栈中执行。每次栈内被清空，都会去读取任务队列有没有任务，有就读取执行，一直循环读取-执行的操作，就形成了事件循环。 

 

导图要表达的内容用文字来表述的话：

• 同步和异步任务分别进入不同的执行"场所"，同步的进入主线程，异步的进入Event Table并注册函数。
• 当指定的事情完成时，Event Table会将这个函数移入Event Queue。
• 主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行。
• 上述过程会不断重复，也就是常说的Event Loop(事件循环)。

通常把异步任务分为宏任务与微任务，它们的区分在于：

• macro-task（宏任务）包括整体代码 script，setTimeout，setInterval，setImmediate（node.js， MessageChannel postMessage  requestAnimationFrame I/O操作 UI渲染。

        一般是 JS 引擎和宿主环境发生通信产生的回调任务，比如 setTimeout，setInterval 是浏览器进行计时的，其中回调函数的执行时间需要浏览器通知到 JS 引擎，网络模块, I/O处理的通信回调也是。包含有 setTimeout，setInterval，DOM事件回调，ajax请求结束后的回调，整体 script 代码，setImmediate。

• 微任务（micro-task）：一般是宏任务在线程中执行时产生的回调，如 Promise，process.nextTick，Object.observe(已废弃)， MutationObserver（DOM监听），这些都是 JS 引擎自身可以监听到回调。

上面我们了解了宏任务与微任务的分类，那么为什么我们要将其分为宏任务与微任务呢？主要是因为其添加到事件循环中的任务队列的机制不同。

在事件循环中，任务一般都是由宏任务开始执行的（JS代码的加载执行），在宏任务的执行过程中，可能会产生新的宏任务和微任务，这时候宏任务（如ajax回调）会被添加到任务队列的末尾等待事件循环机制执行，而微任务则会被添加到当前任务队列的前端，也是等待事件循环机制的执行。

其中相同类型的宏任务或微任务会按照回调的先后顺序进行排序，而不同任务类型的任务会有一定的优先级，按照不同类型任务区分

总计起来就是，Javascript在代码的执行过程中，先同步再异步，在异步执行时，先微任务再宏任务。

整体任务的顺序： 先进行宏任务（可以有多个）-> 微任务 -> 宏任务 -> 微任务 ···

 这个例子看懂基本js执行机制就理解了

console.log(1);
setTimeout(function() {
    console.log(2);
})
var promise = new Promise(function(resolve, reject) {
    console.log(3);
    resolve();
})
promise.then(function() {
    console.log(4);
})
console.log(5);

示例中，setTimeout 和 Promise被称为任务源，来自不同的任务源注册的回调函数会被放入到不同的任务队列中。

有了宏任务和微任务的概念后，那 JS 的执行顺序是怎样的？是宏任务先还是微任务先？

第一次事件循环中，JavaScript 引擎会把整个 script 代码当成一个宏任务执行，执行完成之后，再检测本次循环中是否寻在微任务，存在的话就依次从微任务的任务队列中读取执行完所有的微任务，再读取宏任务的任务队列中的任务执行，再执行所有的微任务，如此循环。JS 的执行顺序就是每次事件循环中的宏任务-微任务。

• 上面的示例中，第一次事件循环，整段代码作为宏任务进入主线程执行首先输出1，遇到Promise，new Promise直接执行，输出3,，然后是5。
• 遇到 Promise，将 then 函数放入到微任务的微任务Event Queue中。
• 遇到了 setTimeout ，就会等到过了指定的时间后将回调函数放入到宏任务的任务队列中。
• 整个事件循环完成之后，会去检测微任务的任务队列中是否存在任务，存在就执行。
• 第一次的循环结果打印为: 1,3,5,4。
• 接着再到宏任务的任务队列中按顺序取出一个宏任务到栈中让主线程执行，那么在这次循环中的宏任务就是 setTimeout 注册的回调函数，执行完这个回调函数，发现在这次循环中并不存在微任务，就准备进行下一次事件循环。
• 检测到宏任务队列中已经没有了要执行的任务，那么就结束事件循环。
• 最终的结果就是 1,3,5,4,2。