js经典题讲解宏任务微任务(js事件循环机制)

首先是代码:

  console.log(1);
      setTimeout(function(){
          console.log(2);
       },0)
   Promise.resolve().then(function(){
        console.log(3);
    }).then(function(){
        console.log(4);
    })
    setInterva(function(){
    console.log(6)
    })
        console.log(5)

这个的话就涉及到了事件执行:
首先javaScript是一门单线程语言,所谓单线程,就是指一次只能完成一件任务,如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,
js执行代码的时候,会将异步代码先挂起然后放在任务队列中,如果执行栈中同步执行完之后,执行战中的代码会清空,所以执行战中没有要执行的代码,这样的话就会将异步代码放在执行栈中执行,之后通过事件循环(Event Loop)根据宏任务和微任务送到执行栈中执行

  • 首先他执行的是第一句console.log(1)这个会直接放在执行栈中执行。
  • 接下来会遇到setTimeout(function(){ console.log(2); },0)这个就是宏任务所以会将这个宏任务放在暂存区
  • 下来又会遇到一个宏任务setInterva(function(){console.log(6) })也会放在暂存区
  • 下来会遇到Promise.resolve().then(function(){ console.log(3); }).then(function(){ console.log(4);})这个任务是一个微任务,然后他也会放在暂存区,但是这个微任务必须是跟在他当前的宏任务屁股后面去执行,由于Promise他没有当前的宏任务,所以他只能更在全局的后面取执行,但是还是先放在暂存区的
  • 下来是遇到console.log(5)放在执行区,会在Promise和 setTimeout之前去执行
    总结:::所以这段代码执行顺序的话是:1,5,3,4,2,6(因为这个代码在执行完执行栈中的代码之后,或执行第一个宏任务,虽然说setTimeout是第一个宏任务,但是Promise没有当前的宏任务,他只能跟在全局的后面去执行,所以当我们在执行完1,5之后我们就取执行3,4,然后再去进行第一次事件循环,输出2,由于当前我们的这个宏任务没有微任务,所以我们只能进行下一次事件循环,也就是去输出6,这样这段代码就算是完成了,这个差不多就是事件循环机制原理,也就是我们说的Event Loop)
    如图:
    在这里插入图片描述
    说一下宏任务:setTimeout、setInterval、setImmediate、I/O、UI rendering。
    微任务:process.nextTick,Promise,MutationObserver。
    事件循环总结:
    我们在执行代码的时候,当我们再遇到一个宏任务是我们会将这个代码会放在一个在暂存区内,代码继续去向去执行,如果说遇到了一个微任务,他会跟在当前的宏任务屁股后面去执行,一次循环结束,但如果说我们又遇到了一个宏任务的话就会进入下一次循环,我们还是会把它放在一个暂存区,继续向下去执行,又遇到了微任务,判断是否是当前宏任务下的微任务,是的话就跟在这个当前的宏任务后面去执行,又一次循环结束。如果说我们在代码中遇到了一个微任务的话会判断他当前有没有宏任务,有的话就跟在当前的宏任务后面,没有的话就跟在整体代码的后面,所以在执行的时候就会先执行整体代码后面的微任务,然后再去寻找宏任务再去寻找但钱宏任务子下面的微任务,然后完成一次又一次的事件循环。
    还有这样一个题:
console.log(1);
let a = setTimeout(() => {console.log(2)}, 0);
console.log(3);
Promise.resolve(4).then(b => {
console.log(b);
clearTimeout(a);
});
console.log(5);

这个题的输出顺序是1,3,5,4
原因:根据我们的的代码首先会输出的是1,3,5,接着我们会去执行暂存区的代码,然后又因为Promise没有当前的宏任务,所以我们就只能先执行这个跟在全局后面的微任务Promise,这时我们就会输出4,然后又因为Promise里面有clearTimeout(a)会将setTimeout会清除掉,所以这时候就不会再输出2,所以就只会输出1,3,5,4
但是这是在一篇文章中截取的一段话:
但是js异步有一个机制,就是遇到宏任务,先执行宏任务,将宏任务放入eventqueue,然后在执行微任务,将微任务放入eventqueue最骚的是,这两个queue不是一个queue。当你往外拿的时候先从微任务里拿这个回掉函数,然后再从宏任务的queue上拿宏任务的回掉函数。 我当时看到这我就服了还有这种骚操作。
看看这篇文章:宏任务与微任务的执行顺序
这些差不多就是我自己的对于宏任务和微任务以及事件循环机制的一个理解

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值