标签：异步 同步 console log microTask 之宏 js 任务 执行

什么是宏任务和微任务

宏任务包括：setTimeout setInterval Ajax DOM事件
微任务：Promise async/await
微任务比宏任务的执行时间要早

使用异步的场景

1. 定时任务：setTimeout，setInverval
2. 网络请求：ajax请求，动态加载
3. 事件绑定

加载示例：

事件绑定示例：

同步阻塞示例：

console.log(1000)
alert(200)
console.log(3000)

上面就是同步阻塞示例，你不点击alert确认窗口，不会打印3000

js绝大部分都是同步；

同步异步问题

首先，你要知道javascript是单线程语言。js任务需要排队顺序执行，如果一个任务耗时过长，后边一个任务也的等着，但是，假如我们需要浏览新闻，但新闻包含的超清图片加载很慢，总不能网页一直卡着直到图片完全出来，所以将任务设计成了两类：

1.同步任务
2.异步任务

同步进入主线程 异步进入Event Table(这里存放的是微任务)当微任务全部完毕后，Event Table会将这个函数移入任务队列(Event Queue)，同步执行完毕，就会去任务队列去找,
任务队列是遵守先进站先出站,进入主线程

上述过程会不断重复，也就是常说的Event Loop（事件循环）。

但是，JS异步还有一个机制，就是遇到宏任务，先执行宏任务，将宏任务放入任务队列（event queue），然后再执行微任务，将微任务放入微任务队列（micro task queue），但是，这两个queue不是一个queue。当你往外拿的时候先从微任务队列里拿这个回调函数，然后再从宏任务的queue拿宏任务的回调函数，如下图：

三、执行顺序

 //请写出输出内容
 //同步执行是从上到下执行的
  async function async1() { //同步执行调用的函数 
       console.log('async1 start'); //第二个打印 同步操作
       await async2(); //await等待 后面是一个promise对象 调用async2
       console.log('async1 end');//第六个打印 同步操作
   }
   async function async2() { 
       console.log('async2'); //第三个打印 执行调用async2的函数 
   }
   
   console.log('script start'); //第一个打印 同步操作先执行
   
   setTimeout(function() { //      异步操作定时器是宏任务放入Event Queue
       console.log('setTimeout'); //第八个打印 
   }, 0)
   
   async1(); //同步函数调用 执行16行调用的函数
   
   new Promise(function(resolve) {
       console.log('promise1'); //第四个打印 new Promise是一个同步的操作 相当于 let hy = new Promise 构造函数写法
       resolve();           
   }).then(function() {    //.then  异步操作 相当于hy.then hy就是你声明的一个变量 
       console.log('promise2'); //第七个打印 属于微任务 放入Event Table 微任务执行的比宏任务要快 
   });                         //要注意的是必须要等到所有微任务都执行完毕后才会执行宏任务
   console.log('script end'); //第五个打印 同步操作 

标签：异步,同步,console,log,microTask,之宏,js,任务,执行
来源： https://blog.csdn.net/weixin_58102387/article/details/122588883

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。