一、什么是同步,什么是异步?
同步:代码依次执行,又叫做非耗时任务,指的是在主线程上排队执行的那些任务,只有前一个任务执行完毕,才能执行后一个任务
异步:执行会滞后于同步代码,如事件,定时器,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解决异步回调文章