资讯专栏INFORMATION COLUMN

结合microtask和macrotask理解event-loop

jeyhan / 2427人阅读

摘要:讲的很清晰,看完之后更深一步的理解了事件循环机制。简短的概述下总结是一个宏任务源,写在里面的回调函数会加到宏任务队列中。至此,一轮的事件循环已经执行完毕,开启新的一轮事件循环。这就是整段代码执行情况的理解。

这篇文章真的是好文。讲的很清晰,看完之后更深一步的理解了事件循环机制。

http://www.jianshu.com/p/12b9...

简短的概述下总结

setTimeout是一个宏任务源,写在里面的回调函数会加到宏任务队列中。

Promise是一个微任务源,写在里面resolve以及reject回调会被加到微任务队列中。

事件循环可以分为这样的一个过程:分别是 宏任务->执行栈->微任务

setTimeout(function() {
    console.log("timeout1");
})

new Promise(function(resolve) {
    console.log("promise1");
    for(var i = 0; i < 1000; i++) {
        i == 99 && resolve();
    }
    console.log("promise2");
}).then(function() {
    console.log("then1");
})

console.log("global1");

比如上面这样的一段代码,setTimeout是一个宏任务源,所以里面的回调函数console.log("timeout1");会被加到宏任务队列中。到了Promise,输出promise1以及promise2,等到for循环结束后,执行resolve,由于Promise是一个微任务源,所以console.log("then1");回调会被加到微任务队列中。继续执行代码,输出grobal1。这个时候,执行栈上的代码已经执行完毕,所以此时我们执行微任务队列,此时的微任务队列上有console.log("then1");,所以浏览器输出then1。至此,一轮的事件循环已经执行完毕,开启新的一轮事件循环。也是从宏任务->执行栈->微任务。由于此时宏任务上有事件console.log("timeout1");,所以输出timeout1。这就是整段代码执行情况的理解。依次输出如下:

promise1
promise2
global1
then1
timeout1

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/56100.html

相关文章

  • 结合microtaskmacrotask理解event-loop

    摘要:讲的很清晰,看完之后更深一步的理解了事件循环机制。简短的概述下总结是一个宏任务源,写在里面的回调函数会加到宏任务队列中。至此,一轮的事件循环已经执行完毕,开启新的一轮事件循环。这就是整段代码执行情况的理解。 这篇文章真的是好文。讲的很清晰,看完之后更深一步的理解了事件循环机制。 http://www.jianshu.com/p/12b9... 简短的概述下总结 setTimeout是一...

    sarva 评论0 收藏0
  • JS是单线程,你了解其运行机制吗?

    摘要:的单线程,与它的用途有关。事件循环事件循环是指主线程重复从消息队列中取消息执行的过程。到此为止,就完成了工作线程对主线程的通知,回调函数也就得到了执行。 一. 区分进程和线程 很多新手是区分不清线程和进程的,没有关系。这很正常。先看看下面这个形象的比喻: 进程是一个工厂,工厂有它的独立资源-工厂之间相互独立-线程是工厂中的工人,多个工人协作完成任务-工厂内有一个或多个工人-工人之间共享...

    AlphaGooo 评论0 收藏0
  • 从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理

    摘要:如果看完本文后,还对进程线程傻傻分不清,不清楚浏览器多进程浏览器内核多线程单线程运行机制的区别。因此准备梳理这块知识点,结合已有的认知,基于网上的大量参考资料,从浏览器多进程到单线程,将引擎的运行机制系统的梳理一遍。 前言 见解有限,如有描述不当之处,请帮忙及时指出,如有错误,会及时修正。 ----------超长文+多图预警,需要花费不少时间。---------- 如果看完本文后,还...

    wanghui 评论0 收藏0
  • js的执行机制

    摘要:异步执行机制异步执行相对来说复杂些所以详细描述下关键是在各种使用情况下执行顺序问题在此就需要引入一个概念。在达到这个下限时间后执行和这些定时器设定的回调。执行设定的回调。 js在哪执行 js的执行引擎基于v8(c++编写),在chrome和node中都有应用,执行时有以下两部分构成 内存堆(内存分配) 调用栈(代码执行) 上述两部分的联系就是代码在调用栈中执行,执行过程中会存取一些...

    guyan0319 评论0 收藏0
  • 夯实基础-JavaScript异步编程

    摘要:调用栈被清空,消息队列中并无任务,线程停止,事件循环结束。不确定的时间点请求返回,将设定好的回调函数放入消息队列。调用栈执行完毕执行消息队列任务。请求并发回调函数执行顺序无法确定。 异步编程 JavaScript中异步编程问题可以说是基础中的重点,也是比较难理解的地方。首先要弄懂的是什么叫异步? 我们的代码在执行的时候是从上到下按顺序执行,一段代码执行了之后才会执行下一段代码,这种方式...

    shadowbook 评论0 收藏0

发表评论

0条评论

jeyhan

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<