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、另外我们可以看到一个现象就是定时器在执行的时候不是一千个定时器的字样全都一次性的打印出来，而是几百几百的增加，这个是为什么呢？这里就涉及到了另外的一个问题，如果是定时器的时间到了，但是定时器中的任务没有执行完成这个时候会怎样？