JS之BOM篇-setTimeout和setInterval
setTimeout()
setTimeout()方法用来指定函数或字符串在指定的毫秒数之后运行。它返回一个整数，表示定时器的编号，这个值可以传递给clearTimeout()方法用于取消对setTimeout的引用
var timer = setTimeout(function(){
console.log(timer)
}, 1000)
console.log(0)
// 0
// 1
示例中，控制台先输出0，大概过1000ms后，输出定时器setTimeout()方法的返回值1
第一个参数也可以写成字符串参数的形式，由于这种形式会造成javascript引擎两次解析，降低性能，故不建议使用
var timer = setTimeout('console.log(timer);',1000);
console.log(0);
如果省略setTimeout的第二个参数，则该参数默认为0
var timer = setTimeout(function(){
console.log(timer)
})
console.log(0)
// 0
// 1
除了前两个参数，setTimeout()方法还允许添加更多的参数，它们将被传入定时器中的函数中。
注意： IE9-浏览器只允许setTimeout有两个参数
setTimeout(function(a,b){
console.log(a+b);
},1000,1,1);
// 2
如果需要兼容IE9-，可以将函数写在定时器外面，然后函数在定时器中的匿名函数中带参数调用
function test(a,b){
console.log(a+b);
}
setTimeout(function(){
test(1,1);
},1000);
clearTimeout()
setTimeout函数返回一个表示计数器编号的整数值，将该整数传入clearTimeout函数，取消对应的定时器
var timer = setTimeout(function(){
console.log(timer);
},100);
// 清除定时器
clearTimeout(1);
var timer = setTimeout(function(){
console.log(timer);
},100);
// 清除定时器
clearTimeout(timer);
上面两种清除定时器的方式效果是一样的，第二种更常用一些
一般来说，setTimeout返回的整数值是连续的，也就是说，第二个setTimeout方法返回的整数值比第一个的整数值大1
var timer1 = setTimeout(function(){
console.log(timer1);
},100);
var timer2 = setTimeout(function(){
console.log(timer2);
},100);
var timer3 = setTimeout(function(){
console.log(timer3);
},100);
// 1
// 2
// 3
setInterval()
setInterval的用法与setTimeout完全一致，区别仅仅在于setInterval指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行。清除setInterval可以使用clearInterval()方法
<button id="btn">0</button>
<script>
var timer = setInterval(function(){
btn.innerHTML = Number(btn.innerHTML) + 1;
},1000);
btn.onclick = function(){
clearInterval(timer);
btn.innerHTML = 0;
}
</script>
注意： HTML5标准规定，setTimeout的最短时间间隔是4毫秒；setInterval的最短间隔时间是10毫秒，也就是说，小于10毫秒的时间间隔会被调整到10毫秒
大多数电脑显示器的刷新频率是60HZ，大概相当于每秒钟重绘60次。因此，最平滑的动画效的最佳循环间隔是1000ms/60，约等于16.6ms
运行机制
setTimeout(function(){
console.log(1);
});
console.log(0);
// 0
// 1
这个示例先打印了0，然后是1。这是因为当把setTimeout的第二个参数设置为0时，表示的不是立即调用的意思，它只是把函数放到异步队列中。浏览器要先执行同步队列里的任务，然后执行异步队列中的任务
btn.onclick = function(){
setTimeout(function(){
console.log(1);
},250);
}
这个示例中，点击btn按钮后发生了什么？简单来说发生了三件事：首先是将onclick事件处理程序加入队列等待执行；然后等到事件处理程序开始执行后，设置一个定时器；最后等250ms后，指定的代码才被添加到队列中等待执行，也就是console.log(1)
如果用一张图表示一下，就是下面这样
现在问题来了，事件处理程序执行了300ms，定时器在255ms处被添加到队列中，但是却不能执行，因为onclick事件处理程序还在运行中。因此定时器代码最早能执行的时机是在300ms处，即onclick事件处理程序结束之后
setInterval()的问题
setInterval()也有同样的问题，假设，某个onclick事件处理程序使用setInterval()设置了200ms间隔的定时器。如果事件处理程序花了300ms多一点时间完成，同时定时器代码也花了差不多的时间，就会同时出现跳过某间隔的情况
示例中，第一个定时器是在205ms处添加到队列中的，但是直到过了300ms处才能执行。当执行这个定时器代码时，在405ms处又给队列添加了另一个副本。在下一个间隔，即605ms处，第一个定时器代码仍在运行，同时在队列中已经有了一个定时器代码的实例。结果是，在这个时间点上的定时器代码不会被添加到队列中
迭代setTimeout
setTimeout(function fn(){
// do
setTimeout(fn, interval)
},interval)
使用链式setTimeout()调用，可以避免setInterval()定时器的问题。在前一个定时器代码执行完之前，不会向队列插入新的定时器代码，确保不会有任何缺失的间隔。而且，它可以保证在下一次定时器代码执行之前，至少要等待指定的间隔，避免了连续的运行
<div id="box" style="width: 100px;height:100px;background: teal;position: absolute;left: 0;"></div>
<script>
box.onclick = function() {
setTimeout(function fn(){
if(parseInt(box.style.left) <= 200) {
box.style.left = parseInt(box.style.left) + 5 + 'px';
setTimeout(fn, 17)
}else{
return false;
}
}, 17)
}
</script>
应用
使用定时器可以调整事件发生的顺序
应用一
在网页开发中，由于事件冒泡的机制，子元素的事件回调函数会早于父元素的事件回调函数触发。如果希望父元素的事件回调函数先发生，就要用到setTimeout(fn, 0)
<div id="box" style="height: 100px;width: 100px;background-color: pink;"></div>
<script>
box.onclick = function(){
setTimeout(function(){
alert(0);
})
}
document.onclick = function(){
alert(1);
}
</script>
示例中，点击box盒子会先弹出1，然后弹出0
应用二
通常由用户触发的回调函数，会在浏览器的默认动作之前触发。比如用户在input中输入文本，keypress事件会在浏览器接受到文本前触发
<input type="text" id="myInput">
<script>
myInput.onkeypress = function(event) {
this.value = this.value.toUpperCase();
}
</script>
这个示例的用意是想把用户输入的字符自动转换成大写，但是由于keypress事件会在浏览器接收文本之前触发，因此只能把前一个字符转换成大写。使用setTimeout可以轻松解决这个问题
<input type="text" id="myInput">
<script>
myInput.onkeypress = function(event) {
setTimeout(function(){
myInput.value = myInput.value.toUpperCase();
})
}
</script>
