Javascript事件管理机制

原创 奔跑的小前端 随笔 从心开始 110阅读 2018-05-14 16:30:16 举报

偶然看到这么一段代码,非常具有代表性,索性就当笔记记下,且看....

代码的输出结果是3、7、4、1、2、5

因为JavaScript本身是单线程的,所以它执行代码任务只能按顺序来执行,但为了避免一下没有效率的等待,JavaScript引入异步这个概念,而setTimeout就是一个异步的任务,上述的代码执行过程分这几个部分:宏任务、微任务、任务队列(概念不清楚的,自行Google,这里不做太多的阐述);

宏任务过程——在这个过程里上述代码有以下的情况,first执行的时候会立刻输出3,然后执行p的时候就会在输出7,此时遇到了setTimeout(我们可以这样理解:“你这个低等公民,现在路上还是有其它身份的公民(宏任务、微任务),等没有人的时候,你才可以走,你现在在旁边等待”),添加到任务队列中,继续执行到res(1),添加微任务(中等公民),在执行res(2),添加到微任务,在来就是console.log(4),
此时宏任务执行完毕(高等公民走光了,接下来到中等公民),输出3、7、4,接着执行微任务;

微任务执行过程——(向我们走来的是JavaScript引擎里面的微任务队列,它们的口号是一二一、一二一...咳咳咳)此时微任务的队伍里就只有1和2,所以会接着输出1、2,这时微任务执行完了,执行栈为空(大马路上终于没有其它人了),然后会执行任务队列里面的任务(低等公民上路);

任务队列执行过程——执行setTimeout只会输出5,有人会问res(6)怎么不会执行呢?这是因为Promise状态一旦改变就不会在受到影响,所以只会输出5;

最终结果这群“公民”的走路顺序就是: 374125,愉快的蹦蹦跳跳的走完啦~ ~!

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复