1.示例代码

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <title>js队列</title>

    </head>

    <body>

        <script type="text/javascript">

            setTimeout(function() {

                console.log('timeout1')

            },0)

            setTimeout(function() {

                console.log('timeout2')

            },10)

            new Promise(function(resolve) {

                console.log('promise1')

                for(var i = 0; i < 1000; i++) {

                    i == 99 && resolve()

                }

                console.log('promise2')

            }).then(function() {

                console.log('then1')

            }).then(function(){

                console.log('then2')

            })

            console.log('global1')

        </script>

    </body>

</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. Selenium2+python自动化47-判断弹出框存在(alert_is_present)【转载】

    前言 系统弹窗这个是很常见的场景,有时候它不弹出来去操作的话,会抛异常.那么又不知道它啥时候会出来,那么久需要去判断弹窗是否弹出了. 本篇接着Selenium2+python自动化42-判断元素(ex ...

  2. docker从零开始 存储（二）volumes 挂载

    使用volumes 卷是保存Docker容器生成和使用的数据的首选机制.mount binds依赖于主机的目录结构,而卷完全由Docker管理.卷绑定安装有几个优点: 与绑定装入相比,卷更易于备份或迁 ...

  3. 抽象语法树简介(ZZ)

    转载自: http://www.cnblogs.com/cxihu/p/5836744.html (一)简介 抽象语法树(abstract syntax code,AST)是源代码的抽象语法结构的树状 ...

  4. hdu 1422(贪心)

    重温世界杯 Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) Total Submiss ...

  5. 成都项目中因为MYSQL与SSDB备分时间不一致，导致主键产生器错误解决一例

    -- JFinal错误提示 Duplicate entry '1791361-1823391' for key 'PRIMARY' -- 1.查看SSDB的主键生成器值ssdb 127.0.0.1:8 ...

  6. native，strictfp，transient，volatile什么java？

    1. native 簡單講,呼叫其他語言(c,c++之類)做出來的dll做法1.利用java做個介面供其他語言實作(也就是宣告成native)2.用javah產出.h:3.用其他語言實現native方 ...

  7. 实现类似微信聊天功能的mysql表设计

    前言: 最近设计了一套聊天功能,此功能支持人对人聊天.发送图片.查看聊天记录.按时间展示聊天列表.最后一条聊天数据及未读消息数 下面分享一下表结构及实现逻辑: 表结构: 1.聊天主表 id(主键id) ...

  8. 【cocos2d-js官方文档】十二、对象缓冲池

    cc.pool的使用场景 经常创建和销毁的元素,例如打飞机游戏里面的子弹等. 不适用的场景:不是很经常创建的物体,比如背景,建筑等. 如何使用cc.pool 让你的类支持cc.pool 首先,你需在需 ...

  9. F - 等式（1/x + 1/y = 1/n）

    链接:https://www.nowcoder.com/acm/contest/90/F来源:牛客网 题目描述 给定n,求1/x + 1/y = 1/n (x<=y)的解数.(x.y.n均为正整 ...

  10. cvCalcOpticalFlowPyrLK的使用--基于高斯金字塔的稀疏光流特征集求解

    void cvCalcOpticalFlowPyrLK( const CvArr* prev, const CvArr* curr, CvArr* prev_pyr, CvArr* curr_pyr, ...