JS中的语言类型

在谈微任务和宏任务之前,我们首先要了解一下JS它是一种单线程的语言,也就是说它同一时间只能干同一件事.JS作为浏览器的脚本语言,它的主要用途在于与用户互动,以及操作DOM,多线程并不适合它(比如一个线程添加DOM节点,一个线程来删除DOM节点,该以哪个为准?).

JS中的异步代码

在单线程的模式中,前一个任务结束我们才能去执行下一个任务,如果前一个任务耗时很长,后一个任务就不得不一直等着.

举个简单的例子,即使不点这个节点 123也是肯定会被打印出来的.

事件循环的任务:ajax请求,定时器,事件...

JS的代码执行流程是 1执行同步 2事件循环 所以上述代码会先执行console.log 再执行点击事件,明白这件事之后我们举一个例子.

一个for循环包裹着一个定时器,这个执行过程是这样的先判断for循环的内容从0到3都符合那么i会自增到3,此时计时器会依次进入事件循环的队列中,然后根据定时器,哪个快执行哪个.

最终输出的结果应该是

宏任务和微任务

微任务:promise.then

宏任务:setTimeout...

要执行宏任务的前提是清空了所有的微任务.

流程:同步-事件循环[宏任务和微任务=>{微任务-宏任务}]

注意这里的new Promise是同步的 promise.then才是异步的微任务.所以根据执行流程,输出结果为