js事件循环,同步,异步,微任务,宏任务执行顺序

164 阅读1分钟

事件循环

EventLoop:

1、Js是单线程,防止代码阻塞,我们把代码(任务):同步和异步;

2、同步代码给js引擎执行,异步代码交给宿主环境;

3、同步代码放入执行栈中,异步代码等待时机成熟送入任务队列排队;

4、执行栈执行完毕,会去任务队列看是否有异步任务,有就送到执行栈执行,反复循环查看执行,这个过程交过事件循环

同步 :立即放入js引擎(js主线程执行,并原地等待结果)

异步:(setimeout setinterval ajaxfetch 事件绑定 promise本身是同步,但是then catch是异步的)先放入宿主环境(浏览器/Node),不必原地等待结果,并不阻塞主线程继续往下执行,异步结果在将来执行。

异步任务(先进先出原则):

微任务:由js引擎发起的任务

分别有:promise.nextTick(node)、promise.Then() .catch().finally() async await object.observe

宏任务:由浏览器或node发起的任务

分别有:script settimeout setinterval定时器

顺序是 script宏任务 》》》 同步任务》》》微任务》》》宏任务 下面是几个很有特征的练习题: 1、

setTimeout(() => {
  console.log('timer1');
  setTimeout(() => {
    console.log('timer3')
  }, 0)
}, 0)
setTimeout(() => {
  console.log('timer2')
}, 0)
console.log('start')

执行循序是:

'start'
'timer1'
'timer2'
'timer3'

2、

setTimeout(() => {
  console.log('timer1');
  Promise.resolve().then(() => {
    console.log('promise')
  })
}, 0)
setTimeout(() => {
  console.log('timer2')
}, 0)
console.log('start')

执行循序是:

'start'
'timer1'
'promise'
'timer2'

3、

Promise.resolve('1')
  .then(res => {
    console.log(res)
  })
  .finally(() => {
    console.log('finally')
  })
Promise.resolve('2')
  .finally(() => {
    console.log('finally2')
  	return '我是finally2返回的值'
  })
  .then(res => {
    console.log('finally2后面的then函数', res)
  })

执行循序是:

'1'
'finally2'
'finally'
'finally2后面的then函数' '2'