前端开发JS：事件循环机制、调用栈以及任务队列

js里的事件循环机制十分有趣。从很多面试题也可以看出来，考察简单的setTimeout也就是考察这个机制的。

创新互联建站主要为客户提供服务项目涵盖了网页视觉设计、VI标志设计、成都营销网站建设、网站程序开发、HTML5响应式网站建设公司、移动网站建设、微商城、网站托管及网站维护、WEB系统开发、域名注册、国内外服务器租用、视频、平面设计、SEO优化排名。设计、前端、后端三个建站步骤的完善服务体系。一人跟踪测试的建站服务标准。已经为航空箱行业客户提供了网站设计服务。

在之前，我只是简单地认为由于函数执行很快，setTimeout执行时间即便为0也不会马上输出，而是等待函数执行完后再输出。这只对了一半。

实际上其运行机制就是js中的事件循环机制，在这个循环机制中呢，又与call Stack和task queue有关。

一、js事件循环机制

事件循环机制呢，简单点来说，就是在执行上下文的过程中，对函数的入栈和出栈。执行前函数先入栈，执行完后函数出栈。如若遇到了一些异步操作像回调函数以及ajax、setTimeout等，会先将他们交给浏览器的其他模块去执行，执行完后，会把回调函数放入到taskqueue中。当所有的call stack执行完后再开始执行task queue中的函数。

举一个简单的例子：

 
 
 
 
  
  
  
  console.log(1);    
  
  
  setTimeout(function()

我们来看一下执行的内部过程

1. 执行***句，放入call stack中，输出 1

2. ***句出栈，执行第二句，由于是异步执行，交给其他模块。

3. 执行完后，将回调函数放入taskqueue中

4. 执行下一句，同***步一样，将语句入栈并执行，输出3

5. 语句出栈，此时call stack空了。开始执行task queue任务，输出2

所以，输出结果是

与预想一致。

二、进阶

如果添加了Promise又如何工作呢?

我们知道，Promise的回调函数不是传入的，而是使用then来调用的。因此，Promise中定义的函数应该是马上执行的，then才是其回调函数，放入queue队列中。

还提到了一个重要的概念：

macro-task包括：script(整体代码), setTimeout, setInterval, setImmediate, I/O, UI rendering。
micro-task包括：process.nextTick, Promises, Object.observe, MutationObserver

执行顺序：函数调用栈清空只剩全局执行上下文，然后开始执行所有的micro-task。当所有可执行的micro-task执行完毕之后。循环再次执行macro-task中的一个任务队列，执行完之后再执行所有的micro-task，就这样一直循环。

 
 
 
 
  
  
  
  (function test() {    
  
  
      setTimeout(function() {console.log(4)}, 0);    
  
  
      new Promise(function executor(resolve) {    
  
  
          console.log(1);    
  
  
          for( var i=0 ; i<10000 ; i++ ) {    
  
  
              i == 9999 && resolve();    
  
  
          }    
  
  
          console.log(2);    
  
  
      }).then(function() {    
  
  
          console.log(5);    
  
  
      });    
  
  
      console.log(3);})()

执行过程：

1. 遇到setTimeout，交给其他模块执行，执行完后回调放入macro-task中

2. 遇到Promise，立即执行里面的function，输出1。

3. 循环开始，遇到resolve()，修改Promise状态为fulfill。继续执行，输出2。

4. 遇到then，将回调放入micro-task中。

5. 继续执行，输出3。

6. call stack执行完毕了。开始执行micro-task中的回调函数，输出5。

7. micro-task执行完毕，开始执行macro-task中的回调函数，输出4。

8. 结束。

【本文为专栏作者“谢军”的原创稿件，转载可通过作者微信公众号(jingfeng18)获取联系】

分享标题：前端开发JS：事件循环机制、调用栈以及任务队列
标题来源：http://www.shufengxianlan.com/qtweb/news49/17449.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容