stack

event-loop queue(宏任务队列)

print

click

console.log('start')
function main() {
    function print(){console.log(1)}
    setTimeout(print,1000);
}
main();
new Promise((resolve,rejct) => {
  console.log('2');
  resolve(3)
  Promise.resolve(4).then((x) => console.log(x));
  requestAnimationFrame(cb1);

}).then((value)=>{
     requestAnimationFrame(cb2)
    console.log(value);
})
console.log('end')

JavaScript引擎

click后的回调

3

开始执行click回调

2

JavaScript把click放入栈中开始执行

5

把main压入栈执行

4

输出‘start’

6

宿主环境开启定时线程,并准备在1秒后把

调用JavaScript引擎来执行print函数

7

输出‘2’

11

输出‘end’

8

把(x)=>console.log()

放入当前任务的微任务队列

10

把t2=(value)=>console.log(value)

放入微任务队列

微任务队列

then((value)=>)

then((x)=>)

12

执行t1,输出4

t1

t2

13

执行t2,

  1. 把cb2放入frames队列中
  2. 输出3

1

宿主环境从event-loop队列中取出click 并启动JavaScript来执行

click

main

9

把cb1放入frames队列中

animation frames queue

cb2

cb1

14

执行cb1

t1

t2

15

执行cb2. 本轮click事件结束

16

宿主环境从event-loop队列中取出print 并启动JavaScript来执行

宿主环境。 

event-loop

event-loop

2019-11-13 14:40:04 0 63
这里是评论

相关推荐