在讲这个之前,我们先搞懂,js的运行机制是什么样的:

一.关于Javascript运行机制:

首先js是单线程语言,也就是说同一时间只能干一件事情，只有前面的事情执行完，才能执行后 面的事情,就好像只有一个窗口的银行,客户需要排队一个一个办理业务,js任务就是一个一个按照顺序执行,如果一个任务耗时过长,那么后一个任务也必须等着,那么问题来了，假如我们想浏览新闻，但是新闻包含的超清图片加载很慢，难道我们的网页要一直卡着直到图片完全显示出来？

因此我们将任务分为两类： 同步任务 和 异步任务

那么什么又是同步任务什么又是异步任务呢??


● 1. 同步任务:

  1.    console.log('红烧肉');
  2.     console.log('鱼香肉丝');
  3.     for (let i = 1; i <= 5; i++) {
  4.       console.log(i);
  5.     }

输出结果:

image.png 也就是说,同步代码会按照顺序依次执行

● 2. 异步任务:

  1. setTimeout(() => {
  2.     console.log('定时器')
  3. },3000)
  4. console.log('执行console');

输出结果:

image.png 按理来说,应该先执行’定时器’,再执行’console’,但是这个执行顺序确实相反的,setTimeout就是异步任务,setTimeout的定时器 不管延迟多少毫秒 也是异步的,但定义了0 最小也是4毫秒

二.任务队列

通过上面的代码,我们知道了代码执行的顺序, 同步任务 > 异步任务, 所以说 在任务队列中 分为两大类 : 1.同步任务 2. 异步任务

除了广义的同步任务和异步任务，我们对任务有更精细的定义：

微任务(micro-task): Promise，process.nextTick

宏任务(macro-task): 包括整体代码script，setTimeout，setInterval

执行顺序是 微任务 > 宏任务

代码演示:

  1.     setTimeout(() => {
  2.       console.log('定时器');
  3.     }, 0)
  4.     new Promise((resolve) => {
  5.       console.log('同步代码')  
  6.       resolve('异步代码')
  7.     }).then((res) => {
  8.       console.log(res);   
  9.     })
  10.     console.log('奥特曼');

输出结果:

  1.               ![image.png](https://cdn.nlark.com/yuque/0/2021/png/21762447/1624032023871-556bdeae-b56d-4623-bec5-6a00f7dd592c.png#clientId=u65cc569b-9ac1-4&from=paste&height=139&id=uffda9f58&margin=%5Bobject%20Object%5D&name=image.png&originHeight=139&originWidth=244&originalType=binary&ratio=1&size=4025&status=done&style=none&taskId=u416c047e-06d5-44b6-9f89-522cdca2b7b&width=244) <br /> 事件执行顺序: 代码从上往下执行,setTimeout是宏任务.先去任务队列排队,然后发现'同步代码'

没写完 后续再补上!!!