同步与异步

一、什么是同步，什么是异步？

同步：代码依次执行，又叫做非耗时任务，指的是在主线程上排队执行的那些任务，只有前一个任务执行完毕，才能执行后一个任务

异步：执行会滞后于同步代码，如事件，定时器，ajax...又叫做耗时任务，异步任务由 JavaScript 委托给宿主环境进行执行，当异步任务执行完成后，会通知 JavaScript 主线程执行异步任务的回调函数，又分为：微任务和宏任务

微任务：promise.then就是微任务 ，颗粒度更小 （精度更高）

提高任务的响应精度；

微任务队列 ：

宏任务 ：事件 定时器 ，网络请求资源加载ajax（颗粒度大，精度差）

宏任务一定需要排序执行不能插队，精度随机

主线程 (script):所有的同步代码

宏任务和微任务的执行顺序

执行顺序是宏任务先执行

【1[1,2,3]】【2[1,2]】【3[]】【4[]】【5[]】

【script:同步代码[微任务队列p.then]】 【settimeout[]】【[]】【[]】

同步任务广义上也是异步；

总结：微任务：promise.then是异步 和 MutationObserver

宏任务：基本上其他都是宏任务

执行顺序：会先执行宏任务，再执行宏任务后的微任务队列【script是一个的的宏任务】

表现上：微任务先执行

控制异步执行的顺序——回调函数（callback）

console.log(111)
function fn(cb) {
    setTimeout(() => {
        console.log(333);
        cb(); 
    }) 
}
fn()
console.log(222)
 // 异步函数调用执行之后再执行代码 。
fn(function () {
     console.log("异步之后执行的代码"); 
})
 // 结果：111  222 333  异步之后执行的代码

二、回调函数是ES5里处理异步顺序的解决方案；

回调函数会出现一些问题，回调函数容易写成回调地狱

回调地狱：回调函数出现层层嵌套；（可维护性差，可读性差，代码不够优雅）

 function fn(cb) {
            setTimeout(() => {
                cb();
            }, 1000);
        }
fn(function () {  // 回调地狱 ；
            // 标志异步fn函数执行完毕
            console.log(111);
            fn(function () {
                console.log(222);
                fn(function () {
                    console.log(333);
                    fn(function () {
                        console.log(444);
                    })
                })
            })
        })

如何解决回调地狱的回调函数的嵌套问题？

1.观察者模式【多见不多用】

2.ES6里的promise

3.async await解决回调地狱【该方法是基于promise的，是promise的语法糖】

用于解决异步的回调地狱问题：promise是ES6用来处理异步问题的内置类型

注意：具体内容详见promise解决异步回调文章