视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
JS事件轮询机制讲解
2020-11-27 19:58:18 责编:小采
文档


JS是单线程语言,深入理解JS里的Event Loop,本文主要和大家分享JS事件轮询机制,希望能帮助到大家。

JS的执行机制(一):

1.首先判断JS是同步还是异步,同步就进入主进程,异步就进入event table

2.异步任务在event table中注册函数,当满足触发条件后,被推入event queue

3.同步任务进入主线程后一直执行,直到主线程空闲时,才会去event queue中查看是否有可执行的异步任务,如果有就推入主进程中

JS的执行机制(二)

1.执行一个宏任务,过程中如果遇到微任务,就将其放到微任务的【事件队列】里

2.当前宏任务执行完成后,会查看微任务的【事件队列】,并将里面全部的微任务依次执行完

任务划分方式:

1.macro-task(宏任务):script,setTimeout,setInterval

2.micro-task(微任务):Promise,process.nextTick

我们从一道小题目出发

for (var i=0;i<=5;i++){
 setTimeout(()=>{console.log(i)},1000)
}

输出结果应该是1s之后连续打印6个6,虽然这个题目的主要知识点是块级作用域,但非常适合用来引出事件轮询机制。因为setTimeout是异步任务,所以不会立即执行,它需要等到所有的同步任务执行完毕,即for循环结束,当i变为6时开始同时执行6个定时器,此时i指向值为6的全局变量,所以打印6,这就是JS执行机制(一)

加点难度,考虑JS执行机制(二)

// promise里面的函数是立即执行的// 分别
输出 2 3 5 4 1setTimeout(function () { console.log(1) },0);new Promise(function executor(resolve) { console.log(2); for(var i=0;i<10000;i++){ i==9999 && resolve(); } console.log(3); }).then(function () { console.log(4); }); console.log(5);

首先执行的第一个宏任务肯定是脚本(script),所以定时器会被跳过(不论你延迟几秒执行),紧接着执行Promise里面的内容,按顺序执行,先打印2,然后进行for循环,resolve()是异步回调函数,属于异步执行的内容,同时如我们在任务划分里面提到的,Promise属于微任务,所以会在宏任务结束之后清空微任务事件队列,所以接下来会打印3,5,4。
至此第一个宏任务便处理完毕,然后才会轮到定时器。

下载本文
显示全文
专题