当前位置: 首页 > 编程日记 > 正文

前端碎碎念 之 nextTick, setTimeout 以及 setImmediate 三者的执行顺序

『前端碎碎念』系列会记录我平时看书或者看文章遇到的问题,一般都是比较基础但是容易遗忘的知识点,你也可能会在面试中碰到。 我会查阅一些资料并可能加上自己的理解,来记录这些问题。更多文章请前往我的个人博客

这个问题是有关执行顺序和Event Loop的。关于Event Loop和任务队列等概念,可以先阅读我引用中的文章,本文主要分析一些存在的疑惑点。

下面这个例子比较典型:

setImmediate(function(){console.log(1);
},0);
setTimeout(function(){console.log(2);
},0);
new Promise(function(resolve){console.log(3);resolve();console.log(4);
}).then(function(){console.log(5);
});
console.log(6);
process.nextTick(function(){console.log(7);
});
console.log(8);//输出结果是3 4 6 8 7 5 2 1

在解释输出结果之前,我们来看几个概念:

macro-task: script (整体代码),setTimeout, setInterval, setImmediate, I/O, UI rendering.
micro-task: process.nextTick, Promise(原生),Object.observe,MutationObserver

除了script整体代码,micro-task的任务优先级高于macro-task的任务优先级。
其中,script(整体代码) ,可以理解为待执行的所有代码。

所以执行顺序如下:

第一步. script整体代码被执行,执行过程为

  • 创建setImmediate macro-task

  • 创建setTimeout macro-task

  • 创建micro-task Promise.then 的回调,并执行script console.log(3); resolve(); console.log(4); 此时输出3和4,虽然resolve调用了,执行了但是整体代码还没执行完,无法进入Promise.then 流程。

  • console.log(6)输出6

  • process.nextTick 创建micro-task

  • console.log(8) 输出8

第一个过程过后,已经输出了3 4 6 8

第二步. 由于其他micro-task 的 优先级高于macro-task。
此时micro-task 中有两个任务按照优先级process.nextTick 高于 Promise。
所以先输出7,再输出5

第三步,micro-task 任务列表已经执行完毕,家下来执行macro-task. 由于setTimeout的优先级高于setIImmediate,所以先输出2,再输出1。

整个过程描述起来像是同步操作,实际上是基于Event Loop的事件循环。

关于micro-task和macro-task的执行顺序,可看下面这个例子(来自《深入浅出Node.js》):

//加入两个nextTick的回调函数
process.nextTick(function () {console.log('nextTick延迟执行1');
});
process.nextTick(function () { console.log('nextTick延迟执行2');
});
// 加入两个setImmediate()的回调函数
setImmediate(function () {console.log('setImmediate延迟执行1'); // 进入下次循环 process.nextTick(function () {console.log('强势插入');});
});
setImmediate(function () {console.log('setImmediate延迟执行2'); 
});console.log('正常执行');

书中给出的执行结果是:

正常执行
nextTick延迟执行1
nextTick延迟执行2
setImmediate延迟执行1
强势插入
setImmediate延迟执行2

process.nextTick在两个setImmediate之间强行插入了。
但运行这段代码发现结果却是这样:

正常执行
nextTick延迟执行1
nextTick延迟执行2
setImmediate延迟执行1
setImmediate延迟执行2
强势插入

朴老师写那本书的时候,node最新版本为0.10.13,而我的版本是6.x

老版本的Node会优先执行process.nextTick。
当process.nextTick队列执行完后再执行一个setImmediate任务。然后再次回到新的事件循环。所以执行完第一个setImmediate后,队列里只剩下第一个setImmediate里的process.nextTick和第二个setImmediate。所以process.nextTick会先执行。

而在新版的Node中,process.nextTick执行完后,会循环遍历setImmediate,将setImmediate都执行完毕后再跳出循环。所以两个setImmediate执行完后队列里只剩下第一个setImmediate里的process.nextTick。最后输出"强势插入"。

具体实现可参考Node.js源码。

关于优先级的另一个比较清晰的版本:

观察者优先级

在每次轮训检查中,各观察者的优先级分别是:

idle观察者 > I/O观察者 > check观察者。

idle观察者:process.nextTick

I/O观察者:一般性的I/O回调,如网络,文件,数据库I/O等

check观察者:setImmediate,setTimeout

setImmediate 和 setTimeout 的优先级

看下面这个例子:

setImmediate(function () {console.log('1'); 
});
setTimeout(function () {console.log('2'); 
}, 0);console.log('3');//输出结果是3 2 1

我们知道现在HTML5规定setTimeout的最小间隔时间是4ms,也就是说0实际上也会别默认设置为最小值4ms。我们把这个延迟加大

上面说到setTimeout 的优先级比 setImmediate的高,其实这种说法是有条件的。

再看下面这个例子,为setTimeout增加了一个延迟20ms的时间:

setImmediate(function () {console.log('1'); 
});
setTimeout(function () {console.log('2'); 
}, 20);console.log('3');//输出结果是3 2 1

setTimeout延迟20ms再执行,而setImmediate是立即执行,竟然2比1还先输出??

试试打印出这个程序的执行时间:

var t1 = +new Date();
setImmediate(function () {console.log('1'); 
});
setTimeout(function () {console.log('2'); 
},20);console.log('3');
var t2 = +new Date();
console.log('time: ' + (t2 - t1));
//输出
3 
time: 23 
2 
1

程序执行用了23ms, 也就是说,在script(整体代码)执行完之前,setTimeout已经过时了,所以当进入macro-task的时候setTimeout依然优先于setImmediate执行。如果我们把这个值调大一点呢?

var t1 = +new Date();
setImmediate(function () {console.log('1'); 
});
setTimeout(function () {console.log('2'); 
},30);console.log('3');
var t2 = +new Date();
console.log('time: ' + (t2 - t1));
//输出
3 
time: 23 
1 
2

setImmediate早于setTimeout执行了,因为进入macro-task 循环的时候,setTimeout的定时器还没到。

以上实验是基于6.6.0版本Node.js测试,实际上在碰到类似这种问题的时候,最好的办法是参考标准,并查阅源码,不能死记概念和顺序,因为标准也是会变的。包括此文也是自学总结,经供参考。

参考:
https://www.zhihu.com/questio...
https://segmentfault.com/a/11...
http://www.jianshu.com/p/837b...

相关文章:

bat 将war文件转换成ear文件

1、无需拷贝war文件,自动获取war set path%path%;D:\jdk\jdk1.6.0_31\bin;C:\Program Files\7-Zip del **0001-controller.war del **0001-controllerEAR.ear copy ..\target\**0001-controller-0.0.1-SNAPSHOT.war **0001-controller.war rem 7z d -tzip **0001-co…

cmake语法【一】

一、Cmake 简介 cmake 是一个跨平台、开源的构建系统。它是一个集软件构建、测试、打包于一身的软件。它使用与平台和编译器独立的配置文件来对软件编译过程进行控制。 二、常用命令 指定 cmake 的最小版本 cmake_minimum_required(VERSION 3.4.1)这行命令是可选的&#xff…

RHEL6.3安装vsftpd

1、下载vsftpd,可以从官网(http://vsftpd.beasts.org)下载,也可以百度搜索[rootlocalhost vsftpd]# wget http://down1.chinaunix.net/distfiles/vsftpd-3.0.2.tar.gz2、解压压缩包并进入解压出来的目录[rootlocalhost vsftpd]# t…

创建mysql数据库,在新数据库中创建表,再尝试删除表

创建之前,先登录数据库存 mysql -u 账号 -p密码 登录完成后,展示一下已存在的数据库 show databases; 创建数据库 create database test111; 然后展示一下数据库,如下 show databases; 使用数据库 use test; 在test数据库里面看一下已存在的…

cmake:在各级目录之间共享变量(cmake cache变量)

摘要: 本文记录一下 CMake 变量的定义、原理及其使用。CMake 变量包含 Normal Variables、Cache Variables。通过 set 指令可以设置两种不同的变量。也可以在 CMake 脚本中使用和设置环境变量。set(ENV{} …),本文重点讲述 CMake 脚本语言特有的两种变量。 正文&am…

antd+dva笔记

参考 React中函数式声明组件Dva Ant Design 前后端分离之 React 应用实践ReactDvaJS 之 hook 路由权限控制dva 知识地图react-router Guides and API docs (v2, v3)react-sage redux-saga 是一个用于管理 Redux 应用异步操作,可以用来代替 redux-thunk 中间件。《Redux-saga 中…

求两个矩形重叠部分的面积

#include<stdio.h> #include<math.h>#define areaFile "area.txt" #define perportionFile "perportion.txt"#define min(a,b) ( ((a)>(b)) ? (b):(a) ) #define max(a,b) ( ((a)>(b)) ? (a):(b) )typedef struct xy { int x; int y; …

session,cookie,sessionStorage,localStorage的区别及应用场景

浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式&#xff0c;可以利用cookie,session等跟服务端进行数据交互。 一、cookie和session cookie和session都是用来跟踪浏览器用户身份的会话方式。 区别&#xff1a; 1、保持状态&#xff1a;cookie保存在浏览器端&#x…

鱼眼镜头及其标定

1. 鱼眼镜头特性与镜头分类 普通镜头和针孔相机在数学模型上可以等价对待&#xff0c;都是射影变换&#xff08;Perspective transform&#xff09;&#xff1b; 鱼眼镜头受到水下斯涅耳窗口现象的启发&#xff0c;采用不同的投影方式&#xff0c;来得到极大的视场角&#xff…

django -- url 的 name 属性

在html的form中使用给url定义的name值&#xff0c;可以在修改url时不用在修改form的src。 urls.py from django.conf.urls import url from mytest import viewsurlpatterns [# url(r^admin/, admin.site.urls),url(r^index/, views.index, namemysite), views.Index.as_view(…

两个矩形重叠部分面积

#include<stdio.h> #include<math.h> #define min(a,b) ( ((a)>(b)) ? (b):(a) ) #define max(a,b) ( ((a)>(b)) ? (a):(b) )typedef struct xy { int x; int y; }xy;void main() {xy a[4];int s,chang,kuang;while (true){printf("Please input 4 x,…

前百度面试官整理的——Java后端面试题(一)

2019独角兽企业重金招聘Python工程师标准>>> List 和 Set 的区别 List , Set 都是继承自 Collection 接口 List 特点&#xff1a;元素有放入顺序&#xff0c;元素可重复 &#xff0c; Set 特点&#xff1a;元素无放入顺序&#xff0c;元素不可重复&#xff0c;重复元…

vibe前景提取算法示例代码

//ViBe.h#pragma once #include <iostream> #include "opencv2/opencv.hpp"using namespace cv; using namespace std;#define NUM_SAMPLES 20 //每个像素点的样本个数 #define MIN_MATCHES 2 //#min指数 #define RADIUS 20 //Sqthere半径 #define SUBSAMPL…

Linux系统程序运行时加载动态库路径顺序

程序运行时加载动态库路径顺序(Linux) 在linux系统中&#xff0c;如果程序需要加载动态库&#xff0c;它会按照一定的顺序&#xff08;优先级&#xff09;去查找: 链接时路径&#xff08;Link-time path&#xff09;和运行时路径&#xff08;Run-time path&#xff09;不是一回…

浮动元素会引起的问题和你的解决办法

问题&#xff1a; &#xff08;1&#xff09;父元素的高度无法被撑开&#xff0c;影响与父元素同级的元素&#xff08;2&#xff09;与浮动元素同级的非浮动元素会跟随其后&#xff08;3&#xff09;若非第一个元素浮动&#xff0c;则该元素之前的元素也需要浮动&#xff0c;否…

Visual Paradigm 教程[UML]:如何使用刻板印象和标记值?(下)

下载Visual Paradigm最新试用版 已加入在线订购&#xff0c;现在抢购立享特别优惠>> 将构造型应用于模型元素 接下来&#xff0c;我们将构造型应用于模型元素。右键单击Customer&#xff0c;然后从弹出菜单中选择Stereotypes> External User。 从图形上看&#xf…

基于opencv的简单视频处理类示例

#include "opencv2/opencv.hpp" using namespace std; using namespace cv; class VideoProcessor { private: VideoCapture caputure; //图像处理函数指针 void (*process)(Mat &,Mat &); bool callIt; string WindowNameInput; string WindowNa…

flex数据绑定

2019独角兽企业重金招聘Python工程师标准>>> 1 、方法绑定 [Bindable(event"myFlagChanged")] private function isEnabled():String { if (myFlag)return true; else return ‘false; } <mx:TextArea id"myTA" text"{isEnabled()}&…

【error】error: field * has incomplete type

在编译程序是出现了如题错误&#xff0c; 类或结构体有前向声明的用法&#xff0c;编译到这里时还没有发现定义&#xff0c;不知道该类或者结构的内部成员&#xff0c;没有办法具体的构造一个对象&#xff0c;所以会报错。 两种解决方法&#xff1a; 方法一&#xff1a;将类成员…

Web前端学习笔记:Vue生命周期理解

一、感谢原创博主 示例代码出处vue2.0 探索之路——生命周期和钩子函数的一些理解 官方文档 二、生命周期简单描述 总共分为8个阶段创建前/后&#xff0c;载入前/后&#xff0c;更新前/后&#xff0c;销毁前/后。 创建前/后 在beforeCreated阶段&#xff0c;vue实例的挂载元素…

获取结构体中变量的偏移量

C/C获取结构体中变量的偏移量 1.某些特殊需求下&#xff0c;我们需要知道某个变量在其结构体中的偏移位置。 通常的做法就是定义一个宏变量&#xff0c;如下&#xff1a; #define OFFSET(structure, member) ((int64_t)&((structure*)0)->member) // 64位系统 #defin…

VS2010 CUDA 5.5 VA_X Win7 64位配置

一.安装CUDA5.5以及配置VS助手 1、安装之前必须确认自己电脑的GPU支持CUDA。在设备管理器中找到显示适配器&#xff08;Display adapters)&#xff0c;找到自己电脑的显卡型号&#xff0c;如果包含在http://www.nvidia.com/object/cuda_gpus.html的列表中&#xff0c;说明支持…

SmartRoute之大规模消息转发集群实现

为什么80%的码农都做不了架构师&#xff1f;>>> 消息转发的应用场景在现实中的应用非常普遍&#xff0c;我们常用的IM工具也是其中之一&#xff1b;现有很多云平台也提供了这种基础服务&#xff0c;可以让APP更容易集成相关功能而不必投入相应的开发成本。对于实现…

unity项目警告之 LF CRLF问题

unity中创建的脚本&#xff0c;以LF结尾。 Visual studio中创建的脚本&#xff0c;以 CRLF结尾。 当我们创建一个unity脚本后&#xff0c;再用VS打开编辑保存后&#xff0c;这个文件既有LF结尾符&#xff0c;也有CRLF结尾符。 解决办法&#xff1a;更改unity的代码生成模板&…

Eigen向量化内存对齐/Eigen的SSE兼容,内存分配/EIGEN_MAKE_ALIGNED_OPERATOR_NEW

1.总结 对于基本数据类型和自定义类型&#xff0c;我们需要用预编译指令来保证栈内存的对齐&#xff0c;用重写operator new的方式保证堆内存对齐。对于嵌套的自定义类型&#xff0c;申请栈内存时会自动保证其内部数据类型的对齐&#xff0c;而申请堆内存时仍然需要重写operat…

c/c++文件遍历

//CBrowseDir.h#pragma once#include <stdlib.h> #include <direct.h> #include <string.h> #include <io.h> #include <stdio.h> #include <iostream> using namespace std; class CBrowseDir { protected: //存放初始目录的绝对…

优化应用启动时的体验

2019独角兽企业重金招聘Python工程师标准>>> 对于应用的启动时间&#xff0c;只能是尽量的避免一些耗时的、非必要性的操作在主线程中&#xff0c;这样相对减少一部分启动的耗时&#xff0c;同时在等待第一帧显示的时间里&#xff0c;可以加入一些配置用来增加用户体…

系列四、SpringMVC响应数据和结果视图

2019独角兽企业重金招聘Python工程师标准>>> 项目结构如下 一、返回值分类 一 返回字符串 Controller方法返回字符串可以指定逻辑视图的名称&#xff0c;根据视图解析器为物理视图的地址&#xff0c;根据字符串最后跳转到对应jsp页面 第一步、导入依赖坐标文件、配置…

numpy数组切片:一维/二维/数组

文章目录numpy数组切片操作一维数组&#xff08;冒号&#xff1a;&#xff09;1、一个参数&#xff1a;a[i]2、两个参数&#xff1a;ba[i:j]3、三个参数&#xff1a;格式b a[i:j:s]4、例子二维数组&#xff08;逗号&#xff0c;&#xff09;取元素 X[n0,n1]切片 X[s0:e0,s1:e1…

行列式求值、矩阵求逆

#include <iostream> #include <string> #include <assert.h> #include <malloc.h> #include <iostream> #include <stdlib.h> #include <memory.h> #include <time.h>using namespace std;//动态分配大小位size的一维数组 te…