前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript入门第六弹——分分钟get Event Loop

JavaScript入门第六弹——分分钟get Event Loop

作者头像
萌兔IT
发布2019-07-25 14:09:13
3450
发布2019-07-25 14:09:13
举报
文章被收录于专栏:萌兔it

Event Loop

Hello,大家好,今天给大家带来的是Event Loop(事件循环)专题。

1 JavaScript的语言特点——单线程

我们首先来说说JS的运行机制,JS的最大特点就是单线程运行,不像Java等语言,可以创建thread。因为JS是脚本语言,JS的最主要用途是与用户互动和操作DOM,如果不是单线程,就会出现浏览器不知道先处理哪个线程不知以哪个线程为主的问题。

有小伙伴会说在H5中提出了Web Worker的概念,允许JS创建多线程,但是这并不与JS的单线程机制矛盾,因为创建的子线程必须受主线程的控制,且不能操作DOM。

2 什么是任务队列,什么是执行栈

既然JS是单线程的,那么就代表着JS代码的执行要按照一定的顺序排队在主线程执行。但是我们知道有些任务执行起来比较慢,这就会造成后续任务的阻塞,因此JS也设计了一个机制,将任务分为同步任务和异步任务对不同类型的任务进行处理。

同步任务:指在主线程上排列执行的任务,所有任务在主线程运行,并形成一个执行栈。只有前一个任务执行完毕,才能执行后一个任务;

异步任务:不会停下来等待异步任务的执行,而是将其挂起,继续执行执行栈中的同步任务,当异步任务又返回结果时,进入任务队列的任务,当任务队列告诉主线程,某个异步任务可执行了,该任务则会进入主线程执行。

除了主线程,还存在一个任务队列,异步任务有了运行结果,就在任务队列中放置一个事件。一旦执行栈中的同步任务执行完毕,就读取任务队列,对应的异步任务结束等待状态,进入执行栈并开始执行。

3 事件和回调函数

任务队列事件:IO设备事件、用户交互事件(鼠标点击、页面滚动),指定过回调函数,事件发生时就可以进入任务队列,等待主线程的读取了。

回调函数:指的是被主线程挂起的代码。异步任务必须指定回调函数,当主线程开始执行异步任务,就是执行对应的函数。

4 重点来啦:Event Loop

总结一下Event Loop吧~

  1. 同步任务会排好队,在主线程上按照顺序执行,前面执行完执行后面的;
  2. 执行栈中的同步任务执行完成后,主线程闲下来,去查看任务队列是否有任务,有则将最先进入任务队列的任务加入到执行栈中执行,执行栈中的任务执行完了之后,主线程便又去任务队列中查看是否有任务可执行。
  3. 不断循环主线程去任务队列读取任务到执行栈的过程。 借一张图说明一下JavaScript的运行机制:(图片来源于网络)

5 定时器

定时器主要涉及两个常用函数,setTimeout(), setInterval(),前者是一次执行,后者反复执行,两者内部运行机制相同

setTimeout()接受两个参数,第一个是回调函数,第二个是推迟执行的毫秒数

setTimeout(fn,0)的含义是,指定某个任务在主线程最早可得的空闲时间执行,也就是说,尽可能早得执行。它在"任务队列"的尾部添加一个事件,因此要等到同步任务和"任务队列"现有的事件都处理完,才会得到执行。

因为主线程中任务执行也需要时间,所以定时器的时间其实不是很精准。

6 宏任务与微任务

这时,有的同学就会问了,那不同的异步任务执行顺序又是怎样的呢?其实对于异步任务,JS还有进一步的划分,即宏任务(macro task)和微任务(micro task),它们也会被分别加入不同的队列(宏任务队列和微任务队列)。

  1. 主线程执行同步任务
  2. 主线程查看微任务,没有微任务则取宏任务的最前面的事件加入执行栈执行;有则将所有微任务中的事件依次加入执行栈执行,执行完毕后,再去宏任务中获取最前面的事件加入执行栈
  3. 反复以上循环

宏任务:setTimeout, setInterval, etc

微任务:new Promise, etc

今天的文章就更新到这里啦,不知道大家有没有理解事件的循环机制呢,兔妞自己觉得梳理完更清晰了呢~~喜欢兔妞文章请点击好看让更多人看到哦,么么哒~~

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-02-22,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 萌兔it 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1 JavaScript的语言特点——单线程
  • 2 什么是任务队列,什么是执行栈
  • 3 事件和回调函数
  • 4 重点来啦:Event Loop
  • 5 定时器
  • 6 宏任务与微任务
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档