JS事件机制

51 阅读1分钟

JS事件机制效果展示

1.如下图所示,首先它有三个空间,执行栈、web Apis、执行队列。当执行js时,是按照顺序一个一个进入到执行栈里面(Call Stack) image.png 下图展示的是执行到第二条语句的效果,此时click方法进入了web Api里,第二条语句console.log进入Call Stack, 然后它出栈执行,输出"Hi" image.png

2.下图展示的是setTimeout的效果,此时,它处于web Apis中进行时间的计算,如果时间计算结束就进入到回调队列(Callback Queue)排队等着

image.png

同时,针对上面的click方法,当触发点击的时候,click的方法进入Callback Queue排队等待 image.png

3.最后,就是当执行栈 Call Stack为空的时候,会去执行队列中获取任务;它的任务包括宏任务(类似setTimeout)、微任务(Promise)。它优先执行微任务