1.示例代码

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3.  
  4.     <head>
  5.         <meta charset="UTF-8" />
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  8.         <title>js队列</title>
  9.     </head>
  10.  
  11.     <body>
  12.         <script type="text/javascript">
  13.  
  14.             setTimeout(function() {
  15.                 console.log('timeout1')
  16.             },0)
  17.             setTimeout(function() {
  18.                 console.log('timeout2')
  19.             },10)
  20.             new Promise(function(resolve) {
  21.                 console.log('promise1')
  22.                 for(var i = 0; i < 1000; i++) {
  23.                     i == 99 && resolve()
  24.                 }
  25.                 console.log('promise2')
  26.             }).then(function() {
  27.                 console.log('then1')
  28.             }).then(function(){
  29.                 console.log('then2')
  30.             })
  31.             console.log('global1')
  32.         </script>
  33.     </body>
  34.  
  35. </html>

控制台输出：

2、队列

setTimeout、setInterval和事件绑定中的代码，通过队列来执行。不是函数调用栈。

任务队列分为：宏任务（macro-task）和微任务（micro-task）。

macro-task：script（整体代码）、setTimeout、setInterval、I/O

micro-task:Primise

3、执行顺序

（1）宏任务的script

（2）执行micro-task，执行完后 第一次事件循环结束

（3）在执行宏任务中的其他任务，如setTimeout。在执行在其他任务如setTimeout可能产生的微任务。微任务执行完毕后再执行其他宏任务队列中的任务。直到宏任务队列中的任务都被执行一遍，并且清空了微任务，第二次循环结束。

（4）如果第二次循环中产生了新的宏任务，或者之前的宏任务没有满足执行条件（如有延迟时间或等待事件触发），那么会继续以同样的顺序重复循环。

js 队列和事件循环的更多相关文章

  1. 消息队列和事件循环（Event Loop）

    产生原因 为什么会有消息队列和事件循环呢?首先最关键的一点在于JS是个单线程,并且主线程非常繁忙,既要处理 DOM,又要计算样式,还要处理布局,同时还需要处理 JavaScript 任务以及各种输入事 ...

  2. JS 单线程和事件循环

    Js 是单线程,js代码从上到下依次执行,比如我们写了两个函数,肯定是上面的函数先执行,下面的函数后执行.但是这种单线程有一个非常大的问题,那就是遇到耗时的任务,后面的任务只能等待它执行完,才能进行. ...

  3. JS执行机制--事件循环--笔记

    JS的解析是由浏览器中的JS解析引擎完成的.JS是单线程运行,也就是说,在同一个时间内只能做一件事,所有的任务都需要排队,前一个任务结束,后一个任务才能开始.但是又存在某些任务比较耗时,如IO读写等, ...

  4. js高级-浏览器事件循环机制Event Loop

    JavaScript 是队列的形式一个个执行的 同一时间只能执行一段代码,单线程的  (队列的数据结构) 浏览器是多线程的 JavaScript执行线程负责执行js代码 UI线程负责UI展示的 Jav ...

  5. 【nodejs原理&源码赏析（7）】【译】Node.js中的事件循环，定时器和process.nextTick

    [摘要] 官网博文翻译,nodejs中的定时器 示例代码托管在:http://www.github.com/dashnowords/blogs 原文地址:https://nodejs.org/en/d ...

  6. 【nodejs原理&源码赏析（7）】【译】Node.js中的事件循环，定时器和process.nextTick

    目录 Event Loop 是什么? Event Loop 基本解释 事件循环阶段概览 事件循环细节 timers pending callbacks poll阶段 check close callb ...

  7. js异步、事件循环（EventLoop）小结

    单线程 众所周知,JS是单线程的语言,之所以是单线程,用一句烂大街的话就是,如果两个线程同时操作一个DOM节点,那么该以哪个为准呢,虽然多线程也有办法解决,但是js毕竟是浏览器脚本语言,不需要那么复杂 ...

  8. js event loop事件循环

    浏览器环境 以下两段代码是等价的.req对事件的回调设置,实际上就是当前主线程任务队列的任务. var req = new XMLHttpRequest(); req.open('GET', url) ...

  9. 0182 JavaScript执行机制：单线程，同步任务和异步任务，执行栈，消息队列，事件循环

    以下代码执行的结果是什么? [结果是1 2 3 ] console.log(1); setTimeout(function () { console.log(3); }, 1000); console ...

随机推荐

  1. selenium 截图 添加时间戳

    在自动化程序中运行的代码报错信息或者是相关日志有可能并无法直观的判断出错信息.因此截图是避免不了的.为了避免因为重复运行或者是图片名称相同导致截图被覆盖. 建议在截图时使用时间戳,保证截图图片名称的唯 ...

  2. Java中的标记接口(zz)

    1.什么是标记接口? Java中把没有定义任何方法和常量的接口称之为标记接口,我们经常使用的比较多的是“”Serializable“”,这个接口也是没有定义人任何方法和常量的. 2.标记接口的作用? ...

  3. （十五）mysql中间件MyCAT实现

    1)拓扑如下和实现目标 写操作:都在master 读操作:在slave1上 当master1挂了,写操作自动切换到master2上 当master2挂了,写操作自动切换到master1上 2)Myca ...

  4. Html5+CSS

    1. 内联样式是为元素添加样式的最简单有效的方式,但是更易于维护的方式是使用层叠样式表CSS(Cascading Style Sheets). <style>  选择器 {属性名称: 属性 ...

  5. （转） 网络GET、POST方法

    在iOS中,常见的发送HTTP请求(GET和POST)的解决方案有 苹果原生(自带) NSURLConnection:用法简单,最古老最直接的一种方案 NSURLSession:iOS7新出的技术,功 ...

  6. 【树链剖分】【线段树】bzoj2157 旅游

    #include<cstdio> #include<algorithm> using namespace std; #define INF 2147483647 #define ...

  7. 【枚举】【二分答案】【分块答案】【BFS】【最大流】【Dinic】bzoj1189 [HNOI2007]紧急疏散evacuate

    [法一]枚举Time(0~N*M): S->'.'(1); 'D'->T(Time); '.'->'D'(dis(用BFS预处理,注意一旦到达'D',BFS就不能继续扩展了,注意di ...

  8. Ionic2 常见问题及解决方案

    前言 Ionic是目前较为流行的Hybird App解决方案,在Ionic开发过程中会遇到很多常见的开发问题,本文尝试对这些问题给出解决方案. 一些常识与技巧 list 有延迟,可以在ion-cont ...

  9. Linux下交叉编译gdb和gdbserver

    平台:tq2440 GCC:  gcc version 4.3.3 (Sourcery G++ Lite 2009q1-176) 这里过程中参考了下面两篇博文: http://blog.csdn.ne ...

  10. ASP.NET Core 1.0基础之静态文件处理

    来源 这些HTML , CSS files, image files, 和JavaScript这些静态文件,是ASP.NET能够直接响应给客户端的.本文详述下ASP.NET和静态文件的关系. Serv ...