我们在日常web前端开发中，经常需要用到定时器方法。
前端中的定时器方法是浏览器提供的，并不是ECMAScript规范中的。是window对象的方法。
浏览器中的定时器有两种，
- 一种是每间隔一定时间执行一次，循环往复。比如每隔一秒执行一次，六十秒过后执行了60次。
一种是过了一定时间执行一次，只执行一次。比如隔一秒后执行一次，过了十万八千秒后也只在第一秒执行了一次，仅有的一次。
- 第一种是：window.setInterval
第二种是：window.setTimeout
由于window在浏览器中是全局对象，可以省略，所以常用setInterval和setTimeout
这两个方法的参数是一模一样的：
- 正常使用的话，至少需要有两个参数。【这一条可以忽略】
不想出现报错的话，至少必须得一个参数。
都可以传递无数个参数。
第一个参数是要执行的js语句，有三种以上的情况
- 字符串："console.log('I am Pelli');"【可读性差，推荐指数：1/10】
匿名函数:function(){console.log("I am Pelli")}【可读性强，推荐指数：8/10】
函数名:showName【可读性强,耦合度低，可装逼，推荐指数：9/10】
其他乱七八糟的内容【非正常程序员干的事情】
第二参数是用来描述时间，以毫秒为单位。有一种以上的情况
- 数值【正常情况下】
数值以外的其他数据类型【异类程序员干的事情】
// 第一个参数的第一种情况
var timer1 = setTimeout("console.log('I am Pelli')");
// 第一个参数的第二种情况
var timer2 = setTimeout(function(){
console.log("I am Pelli");
});
// 第一个参数的第三种情况
function showMyName(){
console.log("I am Pelli");
}
var timer3 = setTimeout(showMyName);
// ！注意：由于以上三种情况都没有传递控制时间的第二个参数，第二个参数默认是0，都会在0秒后执行。
以上三种方式的效果一模一样
// 第一个参数的第四种情况【实际开发中基本上无用】
var timer4_0 = setTimeout(null);
var timer4_1 = setTimeout(12);
var timer4_2 = setTimeout({});//Uncaught SyntaxError: Unexpected identifier
var timer4_3 = setTimeout([]);
var timer4_4 = setTimeout(NaN);
var timer4_5 = setTimeout(false);
var timer4_6 = setTimeout(/I am Pelli/);
综上所述：第一个参数的数据类型不能是引用类型，对象和数组不能直接传递（这和浏览器有关，不同的浏览器处理的方式不一样），其他的诸如字符串，数值，boolean，正则等，都可以直接传递，不过在实际使用中很少有人这么做，没什么实际的意义。
接下来的描述，我们的第一个参数都是以第二种为准。
现在我们来看第二个参数
setTimeout和setInterval的第二个参数是用来描述时间的。以毫秒为单位。1s=1000ms[1秒=1000毫秒]
该参数通常都是直接传递数值的，比如12,120,1000,2000之类的，数据类型为：“number”
// 一秒以后输出：I am Pelli
var timer5 = setTimeout(function(){
console.log("I am Pelli");
},1000); // 两秒后输出：我是沛笠
var timer6 = setTimeout(function(){
console.log("我是沛笠");
},2000);
当然咯，还有一些不正常的程序员会传递一些乱七八糟的参数。让我们来看看不正常的程序员会传递哪些参数
第二个参数除了直接传递数值外，还可以传递非数值类型的值，如果该值能转换成数值类型，则时间间隔就是转换后的值，如果不能转换成数值类型，则时间间隔为默认值。
//第二个参数将会被转换成0
var timer7_0 = setTimeout("console.log('I am Pelli');",""); //转换成0
var timer7_1 = setTimeout("console.log('I am Pelli');",false); //转换成1
var timer7_2 = setTimeout("console.log('I am Pelli');",true); //
var timer7_2 = setTimeout("console.log('I am Pelli');",true + 199); //不能转换成数值，默认0
var timer7_3 = setTimeout("console.log('I am Pelli');",NaN); //转换成0
var timer7_4 = setTimeout("console.log('I am Pelli');",[]);
var timer7_5 = setTimeout("console.log('I am Pelli');",{});
var timer7_6 = setTimeout("console.log('I am Pelli');",/I am Pelli/);
var timer7_7 = setTimeout("console.log('I am Pelli');",function(){});
可以看到，第二个参数也是可以传递各种各样的参数的，只要是能转换成数值类型的，最终都会转换成数值类型，如果没有转换成数值类型的，也不会报错，最终会使用默认时间值。默认值具体是多少，要看是哪种JS引擎。不同的JS引擎赋予的默认值是不一样的。
不过我们作为一个正常的程序员，对于第二个参数只需要记住一点：传递数值，表示间隔时间
以上我们用的是setTimeout,setInterval和setTimeout二者的参数一模一样，唯一的区别就是js语句执行的次数和时机。
setInterval是循环执行
setTimeout只执行一次
var timer8_0 = setInterval(function(){
console.log("我的微信号是：pelligit");
},2000);
var timer8_1 = setTimeout(function(){
console.log("我的邮箱是：pelli_mail@163.com");
},2000);
// 我们来看看以上两个定时器的执行情况
// timer8_0【从2s开始，每隔2s执行一次】
// 0s：
// 1s:
// 2s: "我的微信号是：pelligit"
// 3s:
// 4s: "我的微信号是：pelligit"
// 5s:
// 6s: "我的微信号是：pelligit"
// ......
// ---------------------------------
// timer8_1【只有第2s执行了一次】
// 0s：
// 1s:
// 2s: "我的邮箱是：pelli_mail@163.com"
// 3s:
// 4s:
// 5s:
// 6s:
// ......
实际开发中学到这里就基本上可以完成大多数定时器任务了。只需要掌握两个参数：第一个是执行的语句，第二个是间隔时间。
那么我们现在来做一个小玩意儿吧。用两种不同的方式做一个秒表。
秒表一共三部分。【开始】按钮，【结束】按钮，时间显示区域。
点击【开始】按钮，时间显示区域每一秒增加1。
点击【结束】按钮，时间显示区域显示0，停止数秒。
【HTML代码】
<!-- 时间显示区域 -->
<span id="seconds_content">0</span> <!-- 开始按钮 -->
<button type="button" id="start" name="button">start</button>
<!-- 结束按钮 -->
<button type="button" id="stop" name="button">stop</button>
【JavaScript代码】第一种，使用setInterval
(function(){
// 显示时间
var seconds_content = document.getElementById("seconds_content");
// 开始按钮【点击开始计时】
var start_btn = document.getElementById("start");
// 停止按钮【点击停止计时】
var stop_btn = document.getElementById("stop");
var count = 0;
var time_count;
// 给开始按钮添加点击事件，点击按钮，开始计时
start_btn.addEventListener("click",function(event){
seconds_content.innerHTML = count;
time_count = setInterval(function(){
count++;
seconds_content.innerHTML = count;
},1000);
});
// 给停止按钮添加事件，点击按钮，停止计时
stop_btn.addEventListener("click",function(event){
clearInterval(time_count);
count = 0;
seconds_content.innerHTML = count;
});
})();
【JavaScript代码】第二种，使用setTimeout
(function(){
// 显示时间
var seconds_content = document.getElementById("seconds_content");
// 开始按钮【点击开始计时】
var start_btn = document.getElementById("start");
// 停止按钮【点击停止计时】
var stop_btn = document.getElementById("stop");
var count = 0;
var time_count;
function intervalLike(){
time_count = setTimeout(function(){
count++;
seconds_content.innerHTML = count;
// 循环调用自身，达到和setInterval一样的效果
intervalLike();
},1000);
}
// 给开始按钮添加点击事件，点击按钮，开始计时
start_btn.addEventListener("click",function(event){
intervalLike();
});
// 给停止按钮添加事件，点击按钮，停止计时
stop_btn.addEventListener("click",function(event){
clearInterval(time_count);
count = 0;
seconds_content.innerHTML = count;
});
})();
最终效果如图：
上面就是最简单的秒表程序。实际开发中，还有很多地方需要优化。秒表写完了，打开浏览器看看，是不是有点小兴奋啊。点击start，开始数秒，1,2,3,4,5,6,7,8......点击停止，停止数秒。再点击开始，1,2,3,4,5,6,7.....停止，开始，停止，开始，停止，开始，开始，开始，兴奋过头了，多点击了几次开始，，咦？怎么越来越快了？
看代码可以发现有两个方法和setTimeout和setInterval很像，分别是clearTimeout和clearInterval，由名字就可以看到，前面有一个clear，是清除的意思。这两个都是用来清除定时器引用的
有setTimeout就有clearTimeout
有setInterval就有clearInterval
var timer9 = setTimeout(function(){
console.log('hello world');
},2000);
//清除上面的定时器，hello world将不会输出
clearTimeout(timer9);
timer9的值是setTimeout语句的一个标签，是js引擎对这条语句的记录值，是一个数字，可以传递给clearTimeout用来清除定时器。【以上代码clearTimeout除了可以传递timer9之外，还可以传递和timer9相等的数字】
也就是说clearInterval和clearTimeout的参数是一个数值，该数值是指向要清除的定时器的一个引用地址值。
根据观察发现，该值不是定时器代码的执行所需要的时间，也不是代码执行的间隔时间，单位不是毫秒数。而是随着浏览器启动的时间变长而增大。【谷歌浏览器中】
我猜测这是一个指向定时器的一个地址引用，因为clearInterval和clearTimeout可以直接传递和定时器语句返回值相同的数值。
具体情况，还得研究一下浏览器js引擎的底层。目前由于能力有限，暂未涉及。如果有朋友了解这个东西，欢迎补充完整。
IE浏览器和火狐浏览器都是递增的，不过并不是从0开始的，也不是从1开始的。火狐是2，IE是5，谷歌浏览器的初始值就不确定了，随着时间的推移，该值会越来越大，不过虽然与时间有关，但是其与时间的关联方式目前还有待进一步研究，因为其既不是按着毫秒增长的，也不是按着秒增长的。
还记得之前的秒表越来越快的问题吗？clearInterval和clearTimeout就是解决这个问题的。在适当的时间清除定时器是一个好的编码习惯。
改进型秒表。再也不会越来越快了。不过计时不精确。
// 显示时间
var seconds_content = document.getElementById("seconds_content");
// 开始按钮【点击开始计时】
var start_btn = document.getElementById("start");
// 停止按钮【点击停止计时】
var stop_btn = document.getElementById("stop"); var count = 0;
var time_count; function setTimer(){
time_count = setInterval(function(){
count++;
seconds_content.innerHTML = count;
},1000);
} // 给开始按钮添加点击事件，点击按钮，开始计时
start_btn.addEventListener("click",function(event){
count = seconds_content.innerHTML; // 清除原先的定时器
clearInterval(time_count); // 重新开始计时
setTimer();
}); // 给停止按钮添加事件，点击按钮，停止计时
stop_btn.addEventListener("click",function(event){
clearInterval(time_count);
count = 0;
seconds_content.innerHTML = count;
});
让我们来思考这样一个问题。当定时器的第一个参数是一个匿名函数或者是函数名的时候，而这个匿名函数或者函数名刚好需要传递参数，这个时候我们该怎么办？
就像下面这样
function plus(a,b,c){
console.log(a,b,c);
}
var timer10_0 = setTimeout(plus,1001);
var timer10_1 = setTimeout(function(a,b){
console.log(a + b);
},1000);
这个时候，第三个参数，第四个参数，第五个参数......就发挥作用了。
function plus(a,b,c){
console.log(a,b,c);
}
//hello world hi
var timer10_0 = setTimeout(plus,1001,"hello","world","hi");
var timer10_1 = setTimeout(function(a,b){
console.log(a + b);//
},1000,100,200);
就是这么简单。
关于JavaScript定时器，可以说的东西太多了，这里暂时先介绍到这里。下面留几个面试题，大家欣赏一下。
// 1.下面的代码输出名字的顺序是什么？
console.log("小明");
var myname = setTimeout(function(){
console.log("小华");
},0);
console.log("小丽");
// 2.下面的代码，会弹出什么内容？
var alert_things = setTimeout(function(){
alert("Pelli");
},2000);
while(true){}
// 3.下面的代码，会输出什么？
setTimeout(function(){
console.log(this);
},1000);
// 4.下面的代码，会输出什么？
for (var i = 0; i < 3; i++) {
setTimeout(function() {
console.log(i);
}, 0);
console.log(i);
}
// 5.下面的代码，会弹出哪些东西？
var len=4;
while(len--){
setTimeout(function(){
alert(len);
},0);
alert(len);
}
// 6.下面的代码是什么结果？
var timer = setInterval(function(){
console.log("hello world");
},0); clearInterval(timer);
// 7.下面的代码会弹出什么？
var t = true;
window.setTimeout(function (){
t = false;
},0);
while (t){}
alert('end');
另外有一些开发过程中的最佳实践：
1.setTimeout和setInterval的第一个参数不建议传递字符串，传递字符串和eval有一样的问题，会造成性能方面的问题，甚至引起安全问题。
2.建议用setTimeout模拟setInterval，不建议使用setInterval。页面中setTimeout和clearTimeout不配合使用基本上不会出现问题，因为setTimeout只执行一次，不会造成累加的问题，使用setInterval的话，强烈建议在适当时候使用clearInterval，在这种情况，很容易出现问题。
欢迎各位程序媛和我一起交流讨论。男女通吃。
github地址：www.github.com/pelligit/
我是沛笠，Pelli，
微信号：pelligit
QQ：2653807423
