JavaScript定时器实现的原理分析
JavaScript中的定时器大家基本在平时的开发中都遇见过吧，但是又有多少人去深入的理解其中的原理呢？下面我们就来分析一下定时器的实现原理。
一、储备知识
在我们在项目中一般会遇见过这样的两种定时器，第一种是setTimeOut,第二种是setInterval，这两种定时器有如下的区别：
1、setTimeout允许设置一个超时对象，超时后执行这个对象，但是只执行一次，无周期
2、setInternval允许设置一个超时对象，超时后执行这个对象，周期等于超时对象指定的时间，周期为无限循环
举一个简单的例子来说明一下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>blog案例</title>
</head>
<body>
<script type="text/javascript">
setTimeout("alert('this is test')",2000);
setInterval("console.log('demo');",1000);
</script>
</body>
</html>
这个运行后的结果是弹出了一次对话框，然后在控制台可以看到每1秒钟会向其中输出demo字样
二、定时器原理初识
那么问题来了，如下的代码运行的时候会出现什么情况呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>blog案例</title>
</head>
<body>
<script type="text/javascript">
setTimeout("alert('定时器!')",0);
alert("测试")
</script>
</body>
</html>
是先执行alert("测试")，还是先执行alert("定时器")呢，那么我们就来运行一下吧！
运行后的结果是先弹出测试字样的弹出框，然后才弹出定时器字样的弹出框，为什么会这样呢？不是定时器的时间为0就即可执行吗？
答案不是这样的，因为JS众所周知是单线程的，所以很多人会认为在上面的例子中会先阻塞等待定时器执行完成后再执行下面的语句，但是这个也就是单线程的一个缺陷之一吧，为了解决这个问题，引入了异步机制。异步机制主要是利用一个我们平时很少去关注的一个知识点——浏览器的多线程。究竟什么是浏览器的多线程呢？
三、浏览器的多线程
这里我们就来讲解一下，众所周知，JS是单线程的，但是对于浏览器来说JS的执行只不过是在浏览器众多现成中的一条，我们称之为JS引擎线程。而浏览器的其他线程则是通过JS引擎线程在执行到某个特定的功能之后指定给浏览器的对应线程。具体的原理详见图示：
从这张图我们可以知道JS引擎线程首先执行回调函数块，然后是执行点击事件回调，接着是执行定时器的线程，最后在执行其他的线程。
以下面的代码我们来分析一下：
setTimeout("alert('定时器!')",0);
alert("测试")
首先JS线程读取到setTimeout定时器，这个时候就会执行浏览器的线程，然后跳过定时器继续执行，这个时候你就看到了弹出框的内容为测试，然后因为定时器的时间为0，所以一执行定时器线程就会即可将弹出框为定时器字样的任务添加到主线程（JS引擎线程）的队列之后，等待JS引擎的调用，这个时候我们看到的结果是先弹出测试，然后再弹出定时器
另外我们要注意在HTML5规范中规定定时器的定时时间不能小于4ms，如果是小于4ms，则默认为4ms，所以在这个例子中的0，默认的是4ms，但是这个在不通过的浏览器中的表现是不同的，但是这个一般在项目中是没有什么印象的，这个只是仅做了解即可。
好的我们将上面的代码改写成这样，然后我们再来看看效果：
<script type="text/javascript">
console.time("test");
setTimeout("for(var i=0;i<1000;i++)console.log('定时器!');",1000);
console.log("测试");
console.timeEnd("test");
</script>
运行后的结果如下：
这里有几个知识点：
1、console.time和console.timeEnd这两个方法是可以获取在其中间执行的语句所用的时间，从图中我们可以知道test执行的时间在1ms左右，然而定时器的定时时间是在1000ms左右所以这两个语句只能计算当前引擎的执行时间，换句话说就是在浏览器中的定时器模块的运行时间是这样是没法计算的
2、另外我们可以看到一个现象就是定时器在执行的时候不是一千个定时器的字样全都一次性的打印出来，而是几百几百的增加，这个是为什么呢？这里就涉及到了另外的一个问题，如果是定时器的时间到了，但是定时器中的任务没有执行完成这个时候会怎样？
我们上面说过就是定时器的时间到了的情况下，就会向JS引擎线程添加任务，不论任务里面的语句是否执行完成，都会像JS引擎线程队列中添加，但是剩下的未执行完成的语句怎么办呢？
程序执行到了定时器任务的时候，就会先把已经在定时器模块执行过的语句加载一次，然后是继续执行定时器模块的剩余语句。(定时器模块向JS引擎中添加的任务相当于就是C语言中的一个指针，指向的是定时器模块)
所以，setTimeout我们可以定义为：
在指定时间内, 将任务放入事件队列,等待js引擎空闲后被执行.
四、setInterval的使用
setInterval最基础的使用方法是直接当一个循环定时器使用，这里就不举例说明
对于setInterval(fn, 100)容易产生一个误区：并不是上一次fn执行完了之后再过100ms才开始执行下一次fn。 事实上，setInterval并不管上一次fn的执行结果，而是每隔100ms就将fn放入主线程队列，而两次fn之间具体间隔多久就不一定了，跟setTimeout实际延迟时间类似，和JS执行情况有关。具体的延迟效果与内存等因素有关。
五、定时器的可靠性
虽说定时器在大部分的情况下都是趋于稳定的，但是定时器在使用的时候也存在着一些误差
如下所示：
<script type="text/javascript">
var time1 = new Date().getTime();
setInterval(function(){
var time2 = new Date().getTime();
console.log("setInterval执行的差值时间："+(time2-time1));
},1000);
</script>
运行的结果如下：
从图中我们基本可以看出定时器存在着一些小小的误差就比如第一次的运行时间为1001ms比我们设定的时间多出了1ms，所以得出结论：定时器不是完全的可靠的，存在极小的误差。这个还是在chrome浏览器上面测试的结果，换是在IE浏览器测试那又如何呢？
结果显示，在IE浏览器下面的误差更大
六、定时器的妙用
定时器在项目中除了可以作为定时的作用外还可以用来做耗时代码的优化：
我们假设有这样的一个场景，就是在某个页面中要渲染50万个节点，这个时候对于一般的项目中，直接渲染是不可取的，因为这个时候会占用过多的内存，导致浏览器出现了卡死的状态，用户误以为是页面卡死而 直接关闭浏览器或者杀死进程，即使是用户不关闭页面这样给用户的体验也是不好的，这个时候我们要怎样来解决这个问题呢，我们可以利用定时器来优化这个问题首先我们可以把50万个节点分成多组，每组渲染 的节点数不要过多，然后通过setInterval来进行循环这个既不阻塞JS引擎线程的运行，又不可以提高渲染的消耗时间。从而达到最终的优化渲染。
七、定时器使用注意事项
如果是项目中有对个定时器的参与那么记得在一个定时器执行结束的时候记得要调用clearInterval或clearTimeout这两个方法来清除定时器，以免定时器之间互相干扰出现一些抓摸不定的现象
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，同时也希望多多支持我们！
相关推荐
-
JavaScript暂停和继续定时器的实现方法
对于JavaScript的定时器来说没有严格意义上的暂停和重启,只有清除停止,但是可以通过一些'障眼法'实现 allChild[index].onclick = function(){//当点击目标且满足下面的条件时 让计时器时间暂停 if(gamInt == true){ $("#tu").css("display","block"); //计时器暂停(清除定时器) clearInterval(countdownTimer); //延迟2s后游
-
详解JS中定时器setInterval和setTImeout的this指向问题
前言 Js是一个单线程语言,可以通过setTimeout()和setInterval()来设置代码在指定时刻运行,前者是在指定时间后执行,后者是指每隔一段时间执行.两者的使用方法类似. 最近在练习写一个小例子的时候用到了定时器,发现在setInterval和setTimeout中传入函数时,函数中的this会指向window对象,详细的介绍通过一个示例展开,一起来看看吧. 如下例: var num = 0; function Obj (){ this.num = 1, this.getNum =
-
AngularJS定时器的使用与移除操作方法【interval与timeout】
本文实例讲述了AngularJS定时器的使用与移除操作方法.分享给大家供大家参考,具体如下: 1.相比较于JS中setTimeInterval和setTimeout,AngularJS中通过interval来实现定时器的效果,通过timeout来实现时间延迟. $timeout //实现的是延迟执行 $interval //实现的是定时器的效果 我们分别来看这两个服务 (1)timeout timeout相当于JS原生里面的延迟执行,不同的是该服务的函数返回的是一个promise对象. var
-
js实现日历与定时器
简单的日历,会根据系统日期自动调整对应的日期,每60秒切换一次名言.只要有想法,做出来还是可以与众不同的. 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .calendar { width: 300px; height: 36
-
JavaScript定时器制作弹窗小广告
本文实例为大家分享了js定时器制作弹窗广告的具体代码,供大家参考,具体内容如下 <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * { padding: 0; margin: 0; } li { list-style: none; } body { background: #940032; } #count
-
javascript定时器取消定时器及优化方法
javascript定时器取消定时器及js定时器优化方法 通常用的方法: 启动定时器: window.setInterval(Method,Time) Method是定时调用的js方法 Time是间隔时间,单位是毫秒 取消定时器: clearInterval(Method); 那么问题来了.用 clearInterval(timerid);来清除,往往不能马上停止,用什么方法比较好解决? 优化方案如下 var timeout = false; //启动及关闭按钮 function time()
-
JS定时器使用,定时定点,固定时刻,循环执行详解
本文概述:本文主要介绍通过JS实现定时定点执行,在某一个固定时刻执行某个函数的方法.比如说在下一个整点执行,在每一个整点执行,每隔10分钟定时执行的方法. JavaScript中有两个定时器方法:setTimeout()和setInterval(). 这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript.实际上,setTimeout和setInterval的语法相同.它们都有两个参数,一个是将要执行的代码字符串,或者函数名,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后
-
JavaScript定时器实现的原理分析
JavaScript中的定时器大家基本在平时的开发中都遇见过吧,但是又有多少人去深入的理解其中的原理呢?下面我们就来分析一下定时器的实现原理. 一.储备知识 在我们在项目中一般会遇见过这样的两种定时器,第一种是setTimeOut,第二种是setInterval,这两种定时器有如下的区别: 1.setTimeout允许设置一个超时对象,超时后执行这个对象,但是只执行一次,无周期 2.setInternval允许设置一个超时对象,超时后执行这个对象,周期等于超时对象指定的时间,周期为无限循环 举一
-
javascript垃圾收集机制的原理分析
前面的话 javascript具有自动垃圾收集机制,执行环境会负责管理代码执行过程中使用的内存.在编写javascript程序时,开发人员不用再关心内存使用问题,所需内存的分配以及无用内存的回收完全实现了自动管理.下面将详细介绍javascript的垃圾收集机制 原理 垃圾收集机制的原理很简单:找出那些不再继续使用的变量,然后释放其占用的内存,垃圾收集器会按照固定的时间间隔,或代码执行中预定的收集时间,周期性地执行这一操作 局部变量只在函数执行的过程中存在.而在这个过程中,会为局部变量在栈(或堆
-
JavaScript定时器常见用法实例分析
本文实例讲述了JavaScript定时器常见用法.分享给大家供大家参考,具体如下: 定时器 定时器在javascript中的作用 1.制作动画 2.异步操作 3.函数缓冲与节流 定时器类型及语法 /* 定时器: setTimeout 只执行一次的定时器 clearTimeout 关闭只执行一次的定时器 setInterval 反复执行的定时器 clearInterval 关闭反复执行的定时器 */ var time1 = setTimeout(myalert,2000); var time2 =
-
JavaScript中的闭包原理分析
我们来看一个定义: Closure 所谓"闭包",指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 这说明了,JavaScript中的闭包是包含了上下文的函数,也就是说,这个函数的作用基础,是它所处的环境,这是不能超越的,跟线性代数是不是有一点似曾相识的感觉呢? 换个角度看,闭包的作用是为了实现OO.JavaScript中,没有像C++那样的public.private.protect属性标识, 建立起类比较困难."类
-
解析JavaScript实现DDoS攻击原理与保护措施
DDos介绍 最普遍的攻击是对网站进行分布式拒绝服务(DDoS)攻击.在一个典型的DDoS攻击中,攻击者通过发送大量的数据到服务器,占用服务资源.从而达到阻止其他用户的访问. 如果黑客使用JavaScript的DDoS攻击,那么任何一台计算机都可能成为肉鸡,使潜在的攻击量几乎是无限的. Javascript实现DDos攻击原理分析 现在网站的交互性都是通过JavaScript来实现的.通过添加JavaScript直接插入HTML元素,或通过远程来加载JavaScript.浏览器会读取script
-
javascript 定时器工作原理分析
setTimeout() MDN对 setTimeout 的定义为: 在指定的延迟时间之后调用一个函数或执行一个代码片段. 语法 setTimeout 的语法非常简单,第一个参数为回调函数,第二个参数为延时的时间.函数返回一个数值类型的ID唯一标示符,此ID可以用作 clearTimeout 的参数来取消定时器: var timeoutID = window.setTimeout(code, delay); IE0+ 还支持回调参数的传入: var timeoutID = window.setT
-
JavaScript实现按键精灵的原理分析
最近有个需求,需要在页面上面自动点击.输入.提交. 用以模拟真实用户的操作行为,可以通过直接执行某个元素绑定的事件,来执行操作. 也可以创建事件,再派发事件,执行操作.关于事件的更多细节,可以参考<JavaScript中事件处理> 1.模拟MouseEvent中的click事件,x与y位置随机点击 2.模拟TouchEvent中的touchstart和touchmove,用scroll来做滑动效果 3.模拟FocusEvent,聚焦到屏幕中的输入框内 一.鼠标事件MouseEvent Mous
-
JavaScript中使用import 和require打包后实现原理分析
前言: 之前使用ES6写代码,webpack打包后上线,一点问题没有,也看过打包后的代码,长的很乱,也没敢看看咋回事,加载后就是能运行! 今天通过个例子理解一下打包前,和打包后的代码! 1.创建文件夹,并在里面创建两个文件夹,app文件夹和public文件夹,app文件夹用来存放原始数据和我们将写的JavaScript模块,public文件夹用来存放之后供浏览器读取的文件(包括使用webpack打包生成的js文件以及一个 index.html 文件).接下来我们再创建三个文件: index.ht
-
JavaScript定时器原理
目录 一. setTimeout() 定时器 二.停止 setTimeout() 定时器 三.setInterval() 定时器 四.清除setInterval() 定时器 五.电子时钟案例 前言: 在很多页面中,我们都可以看到一些倒计时或者和时间相关的效果,今天小熊将就JavaScript里面的倒计时做一概述. 首先,我们先来看看定时器,在JS中,有两种定时器: 一. setTimeout() 定时器 语法: window.setTimeout(调用函数, [延迟的毫秒数]); setTime
-
JavaScript定时器原理详解
目录 一. setTimeout() 定时器 二.停止 setTimeout() 定时器 三.setInterval() 定时器 四.清除setInterval() 定时器 五.电子时钟案例 前言: 在很多页面中,我们都可以看到一些倒计时或者和时间相关的效果,今天小熊将就JavaScript里面的倒计时做一概述.首先,我们先来看看定时器,在JS中,有两种定时器: 一. setTimeout() 定时器 语法: window.setTimeout(调用函数, [延迟的毫秒数]); setTimeo