JavaScript中的定时器大家基本在平时的开发中都遇见过吧，但是又有多少人去深入的理解其中的原理呢？下面我们就来分析一下定时器的实现原理。

一、储备知识

在我们在项目中一般会遇见过这样的两种定时器，第一种是setTimeOut,第二种是setInterval，这两种定时器有如下的区别：

1、setTimeout允许设置一个超时对象，超时后执行这个对象，但是只执行一次，无周期

2、setInternval允许设置一个超时对象，超时后执行这个对象，周期等于超时对象指定的时间，周期为无限循环

举一个简单的例子来说明一下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>blog案例</title>
  6. </head>
  7. <body>
  8.     <script type="text/javascript">
  9.         setTimeout("alert('this is test')",2000);
  10.         setInterval("console.log('demo');",1000);
  11.     </script>
  12. </body>
  13. </html> 

这个运行后的结果是弹出了一次对话框，然后在控制台可以看到每1秒钟会向其中输出demo字样

二、定时器原理初识

那么问题来了，如下的代码运行的时候会出现什么情况呢？

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>blog案例</title>
  6. </head>
  7. <body>
  8.     <script type="text/javascript">
  9.         setTimeout("alert('定时器!')",0);
  10.         alert("测试")
  11.     </script>
  12. </body>
  13. </html>

是先执行alert("测试")，还是先执行alert("定时器")呢，那么我们就来运行一下吧！

运行后的结果是先弹出测试字样的弹出框，然后才弹出定时器字样的弹出框，为什么会这样呢？不是定时器的时间为0就即可执行吗？

答案不是这样的，因为JS众所周知是单线程的，所以很多人会认为在上面的例子中会先阻塞等待定时器执行完成后再执行下面的语句，但是这个也就是单线程的一个缺陷之一吧，为了解决这个问题，引入了异步机制。异步机制主要是利用一个我们平时很少去关注的一个知识点——浏览器的多线程。究竟什么是浏览器的多线程呢？

三、浏览器的多线程

这里我们就来讲解一下，众所周知，JS是单线程的，但是对于浏览器来说JS的执行只不过是在浏览器众多现成中的一条，我们称之为JS引擎线程。而浏览器的其他线程则是通过JS引擎线程在执行到某个特定的功能之后指定给浏览器的对应线程。具体的原理详见图示：

从这张图我们可以知道JS引擎线程首先执行回调函数块，然后是执行点击事件回调，接着是执行定时器的线程，最后在执行其他的线程。

以下面的代码我们来分析一下：

  1. setTimeout("alert('定时器!')",0);
  2. alert("测试")

首先JS线程读取到setTimeout定时器，这个时候就会执行浏览器的线程，然后跳过定时器继续执行，这个时候你就看到了弹出框的内容为测试，然后因为定时器的时间为0，所以一执行定时器线程就会即可将弹出框为定时器字样的任务添加到主线程（JS引擎线程）的队列之后，等待JS引擎的调用，这个时候我们看到的结果是先弹出测试，然后再弹出定时器

另外我们要注意在HTML5规范中规定定时器的定时时间不能小于4ms，如果是小于4ms，则默认为4ms，所以在这个例子中的0，默认的是4ms，但是这个在不通过的浏览器中的表现是不同的，但是这个一般在项目中是没有什么印象的，这个只是仅做了解即可。

好的我们将上面的代码改写成这样，然后我们再来看看效果：

  1. <script type="text/javascript">
  2.         console.time("test");
  3.         setTimeout("for(var i=0;i<1000;i++)console.log('定时器!');",1000);
  4.  
  5.         console.log("测试");
  6.         console.timeEnd("test");
  7.     </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执行情况有关。具体的延迟效果与内存等因素有关。

五、定时器的可靠性

虽说定时器在大部分的情况下都是趋于稳定的，但是定时器在使用的时候也存在着一些误差

如下所示：

  1. <script type="text/javascript">
  2.      var time1 = new Date().getTime();
  3.      setInterval(function(){
  4.          var time2 = new Date().getTime();
  5.          console.log("setInterval执行的差值时间："+(time2-time1));
  6.      },1000);
  7.     </script>

运行的结果如下：

从图中我们基本可以看出定时器存在着一些小小的误差就比如第一次的运行时间为1001ms比我们设定的时间多出了1ms，所以得出结论：定时器不是完全的可靠的，存在极小的误差。这个还是在chrome浏览器上面测试的结果，换是在IE浏览器测试那又如何呢？

结果显示，在IE浏览器下面的误差更大

六、定时器的妙用

定时器在项目中除了可以作为定时的作用外还可以用来做耗时代码的优化：
 我们假设有这样的一个场景，就是在某个页面中要渲染50万个节点，这个时候对于一般的项目中，直接渲染是不可取的，因为这个时候会占用过多的内存，导致浏览器出现了卡死的状态，用户误以为是页面卡死而  直接关闭浏览器或者杀死进程，即使是用户不关闭页面这样给用户的体验也是不好的，这个时候我们要怎样来解决这个问题呢，我们可以利用定时器来优化这个问题首先我们可以把50万个节点分成多组，每组渲染  的节点数不要过多，然后通过setInterval来进行循环这个既不阻塞JS引擎线程的运行，又不可以提高渲染的消耗时间。从而达到最终的优化渲染。

七、定时器使用注意事项

如果是项目中有对个定时器的参与那么记得在一个定时器执行结束的时候记得要调用clearInterval或clearTimeout这两个方法来清除定时器，以免定时器之间互相干扰出现一些抓摸不定的现象

JavaScript定时器原理分析的更多相关文章

  1. JavaScript 闭包原理分析

    本文转载至 http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html 另一篇很好的资料 http://www.k ...

  2. Javascript 定时器的使用陷阱 (setInterval)

    setTimeout(function(){ // 其他代码 setTimeout(arguments.callee, interval); }, interval); setInterval会产生回 ...

  3. JavaScript定时器实现的原理分析

    原文链接:http://www.cnblogs.com/st-leslie/p/6082450.html 一.储备知识 在我们在项目中一般会遇见过这样的两种定时器,第一种是setTimeOut,第二种 ...

  4. JavaScript定时器的工作原理（翻译）

    JavaScript定时器的工作原理(翻译) 标签(空格分隔): JavaScript定时器 最近在看ajax原理的时候,看到了一篇国外的文章,讲解了JavaScript定时器的工作原理,帮助我很好的 ...

  5. JavaScript 工作原理之三－内存管理及如何处理 4 类常见的内存泄漏问题(译)

    原文请查阅这里,本文有进行删减,文后增了些经验总结. 本系列持续更新中,Github 地址请查阅这里. 这是 JavaScript 工作原理的第三章. 我们将会讨论日常使用中另一个被开发者越来越忽略的 ...

  6. WebViewJavascriptBridge 原理分析

    WebViewJavascriptBridge 原理分析 网上好多都是在介绍 WebViewJavascriptBridge如何使用,这篇文章就来说说 WebViewJavascriptBridge ...

  7. HTML5 移动应用开发环境搭建及原理分析

    开发环境搭建: 一.Android 开发平台搭建 安装java jdk:\\10.194.151.132\Mewfile\tmp\ADT 配置java jdk 1)  新建系统变量,JAVA_HOME ...

  8. 深入理解JavaScript Hijacking原理

    最近在整理关于JavaScript代码安全方面的资料,在查关于JavaScript Hijacking的资料时,发现关于它的中文资料很少,故特意整理一下. 一.JavaScript Hijacking ...

  9. browserify运行原理分析

    目前对于前端工程师而言,如果只针对浏览器编写代码,那么很简单,只需要在页面的script脚本中引入所用js就可以了. 但是某些情况下,我们可能需要在服务端也跑一套类似的逻辑代码,考虑如下这些情景(以n ...

随机推荐

  1. jquery管理ajax异步－deferred对象

    今天跟大家分享一个jquery中的对象-deferred.其实早在jquery1.5.0版本中就已经引入这个对象了.不过可能在实际开发过程中用到的并不多,所以没有太在意. 这里先不说deferred的 ...

  2. chrome 调试 SASS

    第一步: 执行sass预编译命令 先来我的项目文件夹结构: ->进入sass /css文件下->打开cmd命令 ->输入sass --watch --scss  test.scss: ...

  3. 记jQuery.fn.show的一次踩坑和问题排查

    最近很少已经很少用jQuery,因为主攻移动端,常用Zepto,其实很多细节和jQuery并不一样.最近又无意中接触到了PC的需求和IE6, 使用了jQuery,刚好踩坑了,特意记录一下. 本文内容如 ...

  4. [Android]官网《monkeyrunner》中文翻译

    以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/5050768.html 翻译自 Android Develope ...

  5. Android Activity launchMode研究

    Android Activity launchMode研究 Activity的Launch mode一共有四种: standard, singleTop, singleTask, singleInst ...

  6. [DOM Event Learning] Section 1 DOM Event 处理器绑定的几种方法

    [DOM Event Learning] Section 1 DOM Event处理器绑定的几种方法   网页中经常需要处理各种事件,通常的做法是绑定listener对事件进行监听,当事件发生后进行一 ...

  7. JDBC API Description

    package java.sql description What the JDBCTM 4.2 API Includes Versions What the java.sql Package Con ...

  8. Oracle Listener 动态注册 与 静态注册

    http://blog.csdn.net/tianlesoftware/article/details/5543166

  9. 今天在在linux环境下 管理自己的php项目时 删除一个分类 结果报了一个Table表名 doesn’t exist

    在百度上查了 一下  发现是是大小写的问题  在此分享一下

  10. docker核心原理

    容器概念. docker是一种容器,应用沙箱机制实现虚拟化.能在一台宿主机里面独立多个虚拟环境,互不影响.在这个容器里面可以运行着我饿们的业务,输入输出.可以和宿主机交互. 使用方法. 拉取镜像 do ...