深入理解JavaScript定时机制
本文介绍了JavaScript定时机制，要理解JavaScript的定时机制，就要知道JavaScript的运行机制。
首先声明，JavaScript是单线程运行（JavaScript引擎线程）事件驱动。
一、浏览器中有多个线程
一款浏览器中包含的最基本的线程：
1、JavaScript引擎线程。
2、定时器线程，setInterval和setTimeout会触发这个线程。
3、浏览器事件触发线程，这个线程会触发onclick、onmousemove和其它浏览器事件。
4、界面渲染线程，负责渲染浏览器界面HTML元素。注意：在JavaScript引擎运行脚本期间，界面渲染线程都是处于挂起状态的。也就是说当使用JavaScript对界面中的节点进行操作时，并不会立即体现出来，要等到JavaScript引擎线程空闲时，才会体现出来。（这个最后说）
5、HTTP请求线程（Ajax请求也在其中）。
以上这些线程在浏览器内核的控制下，相互配合，完成工作（具体我也不知道）。
二、任务队列
我们知道JavaScript是单线程的，所有JavaScript代码都在JavaScript引擎线程中运行。阮一峰老师的文章中叫这个线程为主线程，是一个执行栈。（以下内容也主要是根据阮一峰老师的文章理解总结。）
这些JavaScript代码我们可以把他们看成一个个的任务，这些任务有同步任务和异步任务之分。同步任务（比如变量赋值语句，alert语句，函数声明语句等等）直接在主线程上按顺序执行，异步任务（比如浏览器事件触发线程触发的各种各样的事件，使用Ajax返回的服务器响应等）按照时间先后顺序在任务队列（也可以叫做事件队列、消息队列）中排队，等待被执行。只要主线程上的任务执行完了，就会去检查任务队列，看有没有排队等待的任务，有就让排队的任务进入主线程执行。
比如下面的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>定时机制</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
position: relative;
height: 600px;
}
#test{
height: 30px;
width: 30px;
position: absolute;
left: 0;
top: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div id="test">
</div>
<script>
var pro = document.getElementById('test');
pro.onclick = function() {
alert('我没有立即被执行。');
};
function test() {
a = new Date();
var b=0;
for(var i=0;i<3000000000;i++) {
b++;
}
c = new Date();
console.log(c-a);
}
test();
</script>
</body>
</html>
在这个例子中test()函数执行完大概要8~9秒，所以当我们打开这个页面，在8秒之前点击粉色方块，不会立即弹出提示框，而要等到8秒之后才弹出，而且8秒之前点击几次粉色框，8秒之后就弹出几次。
我们打开这个页面时，主线程先声明函数test，再声明变量pro，然后把p节点赋值给pro，然后给p节点添加click事件，并指定回调函数（挂起），然后调用test函数，执行其中的代码。在test函数中的代码执行期间，我们点击了p节点，浏览器事件触发线程检测到这个事件，就把这个事件放在了任务队列中，以便主线程上的任务（这里是test函数）执行完后，检查任务队列时发现这个事件并执行相应的回调函数。如果我们多次点击，这些多次触发的事件就按触发时间的先后在任务队列中排队（可以再给另外一个元素添加点击事件，交替点击不同的元素来验证）。
下面是总结的任务的运行机制：
异步执行的运行机制如下。（同步执行也是如此，因为它可以被视为没有异步任务的异步执行。）
1、所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
2、主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
3、一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
4、主线程不断重复上面的第三步。
三、事件和回调函数
我们在给DOM元素指定事件时，都会指定一个回调函数，以便事件真的发生时执行相应的代码。
主线程中事件的回调函数会被挂起，如果任务队列中有正在排队的相应的事件，当主线程检测到时就会执行相应的回调函数。我们也可以说主线程执行异步任务，就是在执行相应的回调函数。
四、事件循环
主线程检查任务队列中事件的过程是循环不断的，因此我们可以画一个事件循环的图：
上图中主线程产生堆和执行栈，栈中的任务执行完毕后，主线程检查任务队列中由其他线程传入的发生过的事件，检测到排在最前面的事件，就从挂起的回调函数中找出与该事件对应的回调函数，然后在执行栈中执行，这个过程一直重复。
五、定时器
结合以上知识，下面探讨JavaScript中的定时器：setTimeout()和setInterval()。
setTimeout(func, t)是超时调用，间隔一段时间后调用函数。这个过程在事件循环中的过程如下（我的理解）：
主线程执行完setTimeout(func, t);语句后，把回调函数func挂起，同时定时器线程开始计时，当计时等于t时，相当于发生了一个事件，这个事件传入任务队列（结束计时，只计时一次），当主线程中的任务执行完后，主线程检查任务队列发现了这个事件，就执行挂起的回调函数func。我们指定的时间间隔t只是参考值，真正的时间间隔取决于执行完setTimeout(func, t);语句后的代码所花费的时间，而且是只大不小。（即使我们把t设为0，也要经历这个过程）。
setInterval(func, t)是间歇调用，每隔一段时间后调用函数。这个过程在事件循环中的过程与上面的类似，但又有所不同。
setTimeout()是经过时间t后定时器线程在任务队列中添加一个事件（注意是一个），而setInterval()是每经过时间t（一直在计时，除非清除间歇调用）后定时器线程在任务队列中添加一个事件，而不管之前添加的事件有没有被主线程检测到并执行。（实际上浏览器是比较智能的，浏览器在处理setInterval的时候，如果发现已任务队列中已经有排队的同一ID的setInterval的间歇调用事件，就直接把新来的事件 Kill 掉。也就是说任务队列中一次只能存在一个来自同一ID的间歇调用的事件。）
举个例子，假如执行完setInterval(func, t);后的代码要花费2t的时间，当2t时间过后，主线程从任务队列中检测到定时器线程传入的第一个间歇调用事件，func开始执行。当第一次的func执行完毕后，第二次的间歇调用事件早已传入任务队列，主线程马上检测到第二次的间歇调用事件，func函数又立即执行。这种情况下func函数的两次执行是连续发生的，中间没有时间间隔。
下面是个例子：
function test() {
a = new Date();
var b=0;
for(var i=0;i<3000000000;i++) {
b++;
}
c = new Date();
console.log(c-a);
}
function test2() {
var d = new Date().valueOf();
//var e = d-a;
console.log('我被调用的时刻是：'+d+'ms');
//alert(1);
}
setInterval(test2,3000);
test();
结果：
为什么8.6秒过后没有输出两个一样的时刻，原因在上面的内容中可以找到。
执行例子中的for循环花费了8601ms，在执行for循环的过程中队列中只有一个间歇调用事件在排队（原因如上所述），当8601ms过后，第一个间歇调用事件进入主线程，对于这个例子来说此时任务队列空了，可以再次传入间歇调用事件了，所以1477462632228ms这个时刻第二次间歇调用事件（实际上应该是第三次）传入任务队列，由于主线程的执行栈已经空了，所以主线程立即把对应的回调函数拿来执行，第二次调用与第一次调用之间仅仅间隔了320ms（其实8601+320=8920，差不多就等于9秒了）。我们看到第三次调用已经恢复正常了，因为此时主线程中已经没有其他代码了，只有一个任务，就是隔一段时间执行一次间歇调用的回调函数。
用setTimeout()实现间歇调用的例子：
function test() {
a = new Date();
var b=0;
for(var i=0;i<3000000000;i++) {
b++;
}
c = new Date();
console.log(c-a);
}
function test2(){
var d = new Date().valueOf();
console.log('我被调用的时刻是：'+d+'ms');
setTimeout(test2,3000);
}
setTimeout(test2,3000);
test();
结果：
每两次调用的时间间隔基本上是相同。想想为什么？
再看一个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flex布局练习</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
position: relative;
height: 600px;
}
#test{
height: 30px;
width: 30px;
position: absolute;
left: 0;
top: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div id="test">
</div>
<script>
var p = document.createElement('p');
p.style.width = '50px';
p.style.height = '50px';
p.style.border = '1px solid black';
document.body.appendChild(p);
alert('ok');
</script>
</body>
</html>
这个例子的结果是提示框先弹出，然后黑色边框的p元素才出现在页面中。原因很简单，就一句话：
在JavaScript引擎运行脚本期间，界面渲染线程都是处于挂起状态的。也就是说当使用JavaScript对界面中的节点进行操作时，并不会立即体现出来，要等到JavaScript引擎线程空闲时，才会体现出来。
以上就是我对JavaScript定时机制的理解及总结，如有错误，希望看到的大神指正。也希望大家多多支持我们。
相关推荐
-
Node.js中使用计时器定时执行函数详解
如果你熟悉客户端JavaScript编程,你可能使用过setTimeout和setInterval函数,这两个函数允许延时一段时间再运行函数.比如下面的代码, 一旦被加载到Web页面,1秒后会在页面文档后追加"Hello there": 复制代码 代码如下: var oneSecond = 1000 * 1; // one second = 1000 x 1 ms setTimeout(function() { document.write('<p>Hello there.
-
浅谈js中的延迟执行和定时执行
在js中,延迟执行函数有两种,setTimeout和setInterval,用法如下: function testFunction(){Console.log('hovertree.com');} setTimeout("testFunction()","6000"); //6000毫秒后执行testFunction()函数,只执行一次. setInterval("testFunction()","6000");//每隔600
-
JavaScript可否多线程? 深入理解JavaScript定时机制
例如 复制代码 代码如下: setTimeout( function(){ alert('你好!'); } , 0); setInterval( callbackFunction , 100); 认为setTimeout中的问候方法会立即被执行,因为这并不是凭空而说,而是JavaScript API文档明确定义第二个参数意义为隔多少毫秒后,回调方法就会被执行. 这里设成0毫秒,理所当然就立即被执行了. 同理对setInterval的callbackFunction方法每间隔100毫秒就立即被执行
-
深入理解JavaScript定时机制
本文介绍了JavaScript定时机制,要理解JavaScript的定时机制,就要知道JavaScript的运行机制. 首先声明,JavaScript是单线程运行(JavaScript引擎线程)事件驱动. 一.浏览器中有多个线程 一款浏览器中包含的最基本的线程: 1.JavaScript引擎线程. 2.定时器线程,setInterval和setTimeout会触发这个线程. 3.浏览器事件触发线程,这个线程会触发onclick.onmousemove和其它浏览器事件. 4.界面渲染线程,负责渲染
-
JavaScript是否可实现多线程 深入理解JavaScript定时机制
容易欺骗别人感情的JavaScript定时器 JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感, 例如 复制代码 代码如下: setTimeout( function(){ alert('你好!'); } , 0); setInterval( callbackFunction , 100); 认为setTimeout中的问候方法会立即被执行,因为这并不是凭空而说,而是JavaS
-
JavaScript是否可实现多线程 深入理解JavaScript定时机制
容易欺骗别人感情的JavaScript定时器 JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感, 例如 复制代码 代码如下: setTimeout( function(){ alert('你好!'); } , 0); setInterval( callbackFunction , 100); 认为setTimeout中的问候方法会立即被执行,因为这并不是凭空而说,而是JavaS
-
javascript运行机制之执行顺序理解
JavaScript是一种描述型脚本语言,它不同于java或C#等编译性语言,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行.如果你不能理解javaScript语言的运行机制,或者简单地说,你不能掌握javascript的执行顺序,那你就犹如伯乐驾驭不了千里马,让千里马脱缰而出,四处乱窜. 那么JavaScript是怎么来进行解析的吗?它的执行顺序又是如何的呢?在了解这些之前,我们先来认识几个重要的术语: 1.代码块 JavaScript中的代码块是指由<script>
-
深入理解JavaScript的事件执行机制
目录 前言 浏览器 JS 异步执行的原理 浏览器中的事件循环 执行栈与任务队列 宏任务和微任务 Async/await的运行顺序 特点 示例 个人分析 前言 熟悉事件循环,了解浏览器运行机制将对我们理解 JavaScript 的执行过程和排查运行问题有很大帮助.以下是总结的一些浏览器事件循环的一些原理和示例. 浏览器 JS 异步执行的原理 JS 是单线程的,也就是同一个时刻只能做一件事情,那么,为什么浏览器可以同时执行异步任务呢? 因为浏览器是多线程的,当 JS 需要执行异步任务时,浏览器会另外
-
JavaScript 运行机制详解再浅谈Event Loop
目录 一.为什么JavaScript是单线程? 二.任务队列 三.事件和回调函数 四.Event Loop 五.定时器 六.Node.js的Event Loop 一.为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. JavaScript的单线程,与它的用途有关.作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM.这决定了它只能是单线
-
JavaScript执行机制详细介绍
目录 1.进程与线程的概念 2.浏览器原理 3.同步与异步 4.执行栈与任务队列 5.事件循环(Event-Loop) 6.定时器 前言: 不论是工作还是面试,我们可能都经常会碰到需要知道代码的执行顺序的场景,所以打算花点时间彻底搞懂JavaScript的执行机制. 想要搞懂JavaScript执行机制,你需要清楚下面这些知识: (以浏览器环境为例,与Node环境不同) 1.进程与线程的概念 浏览器原理 事件循环(Event-Loop),任务队列(同步任务,异步任务,微任务,宏任务) 进程与线程
-
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
具体一点就是编写高质量JavaScript的一些要素,例如避免全局变量,使用单变量声明,在循环中预缓存length(长度),遵循代码阅读,以及更多. 此摘要也包括一些与代码不太相关的习惯,但对整体代码的创建息息相关,包括撰写API文档.执行同行评审以及运行JSLint.这些习惯和最佳做法可以帮助你写出更好的,更易于理解和维护的代码,这些代码在几个月或是几年之后再回过头看看也是会觉得很自豪的. 书写可维护的代码(Writing Maintainable Code ) 软件bug的修复是昂贵的,并且
-
Javascript继承机制的设计思想分享
我一直很难理解Javascript语言的继承机制. 它没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instance)的区分,全靠一种很奇特的"原型链"(prototype chain)模式,来实现继承. 我花了很多时间,学习这个部分,还做了很多笔记.但是都属于强行记忆,无法从根本上理解. 直到昨天,我读到法国程序员Vjeux的解释,才恍然大悟,完全明白了Javascript为什么这样