继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

JS事件循环,了解一下?

志如
关注TA
已关注
手记 10
粉丝 6967
获赞 127

在理解事件循环之前,我总会遇到一些奇奇怪怪的问题:比如明明已经调接口拿到了数据,可是跟在调数据之后的操作却没有正常执行;又或者不知道为啥,代码里非得加个setTimeout才能正常跑通;特别是在运用Promise的时候,更是有各种问题百思不得解。遇上问题要解决,更要知道问题产生的原因,这样才能hold住全场!

废话不多说了,先来看一段代码


console.log('start');

setTimeout(function(){

console.log('setTImeout1')

},0);

new Promise(function(resolve,reject){

console.log('resolve')

setTimeout(function(){

console.log('setTimeout2')

},200);

resolve()

}).then(function(){

console.log('then')

});

setTimeout(function(){

console.log('setTimeout3')

},0);

console.log('end');

结果是start resolve end then setTimeout1 setTimeout3 settimeout2

在分析结果之前,我先来科普几个概念,这些概念的表述不一定与标准完全对应,但是可以帮助你更容易理解JS的事件机制

  • 宏任务(macro-task):包括js整体代码,setTimeout,setInterval,setImmediate ,I/O, UI renderder等

  • 微任务(micro-task):包括Promise,Object.observe,process.nextTick,MutationObserver等

  • 调用栈:js被加载进来之后,会从上至下读取代码,同步代码被立即执行,而异步代码被加入事件队列中

  • 事件队列:一些没有被立即执行的代码被添加到事件队列中,队列是一种先进先出的数据结构,也就是说,先加入事件队列的任务会被优先执行

我们知道,js是单线程的,这就是说,只有一个主线程,主线程会自上而下依次执行调用栈中的事件。任务队列中的代码被加载到函数调用栈中去执行。当前的宏任务队列中的代码执行完毕后,会执行本次宏任务队列中分发到微任务队列中的代码。然后执行下一个宏任务队列中的代码,依次循环。

这里要提一点容易误解的地方,setTimeout函数本身,其实是立即执行的,它内部的任务,才会被分发到任务队列中延时执行。


  • 代码被加载后,全局上下文进入函数调用栈,紧接着,‘start’被执行

  • 遇到setTimeout的时候,新建了一个宏任务队列,函数内的任务被分发这个队列中等待执行

  • 此时遇到了Promise,注意,Promise中的第一个function中的代码会立马开始执行,遇到resolve或者reject后,then方法中函数会被分发到本次事件循环的微任务队列中等待执行。所以这里立马打印出了'resolve'。遇到setTimeout2后,同样新建了一个宏任务队列,其中的函数被分发到了这个新的宏任务队列中,then方法中的操作被分发到了微任务队列中等待

  • 代码继续往下,遇到'setTimeout3'后再次新建了一个新的宏任务队列

  • 'end'被立即执行。此时有三个宏任务队列,一个微任务队列

  • 微任务队列中的操作被执行,也就是打印出了‘then’,此时,第一轮的事件循环结束。

  • 第一轮的事件循环结束,开始下一轮的事件循环,依次执行每个宏任务队列中的内容,我们这里宏任务队列中的函数比较简单,都是console操作,所以并没有再分发新的任务队列,但是由于第二个setTimeout设定了200毫秒的延时,所以‘setTimeout2’被最后打印。

说到这里,你基本上对事件循环有个大致的了解了。之前有个同学问过我一个问题,点击轮播图下一页,但是页面没有反应,代码是这样的:

这个函数是点击下一页的按钮后轮播图转动,他在getNextPhoto函数中调接口获取了下个页面的数据,goToPage函数里是让轮播图切换的操作。相信如果你读懂了这篇文章,就会知道问题出在了哪里。显然获取数据ajax是个异步操作,他被分发到了事件队列中等待执行,所以还没等数据回来,翻页的操作已经开始执行,由于没有数据,并没有按预期效果显示。解决方法就是在getNextPhoto函数里调接口拿到数据之后,再通知去执行goToPage操作,问题就解决了。

作为一个前端菜鸟,希望得到各位大神的批评指正!

打开App,阅读手记
5人推荐
发表评论
随时随地看视频慕课网APP