Javascript(笔记30) - 定时器
setInterval
定时器，每隔一段时间，都执行一次函数；也可以理解为定时循环器；
setInterval() 跟俩 参数，前一个函数，后一个时间间隔，单位毫秒；
这里的1000，只会被读取一次，不要试图修改这个值来改变函数执行的间隔；
setInterval(function(){
console.log('a');
},1000);
这个定时器的意思是说：每隔1秒，打印一次“a”；
通过定时器也可以实现数的累加：
var i = 0;
setInterval(function(){
i ++;
console.log(i);
},1000);
看控制台：
定时器准不准？
我们写个函数验证一下，定义两个时间戳相减，并把后一个时间戳赋值给前一个时间戳；
var firstTime = new Date().getTime();
setInterval(function () {
var lastTime = new Date().getTime();
console.log(lastTime - firstTime);
firstTime = lastTime;
}, 1000);
截一段输出结果：
定时器确实不太准，因为电脑的系统资源在变，需要计算的队列可不一定只有这个定时器。
clearInterval
用来清除 setInterval
setInterval 有返回值，我们拿个 Timer 来接收返回值看看 : timer1 是数字 1；
var timer1 =setInterval(function(){},1000); // 1
我们再写一个 timer2 来接受下一个 setInterval ： timer2 就变成 2 了；
var timer1 =setInterval(function(){},1000); // 1
var timer2 =setInterval(function(){},1000); // 2
也就是说，每一个定时器都会返回一个唯一标识来代表是第几个定时器；
有了这个唯一标识，就可以用 clearInterval 来清除掉：
clearInterval(timer1);
写一个定时器，并在一定条件下来终止定时器：
var i = 1;
var timer = setInterval(function(){
console.log(i ++);
if (i> 10){
clearInterval(timer);
}
},10);
看控制台：走到10就结束了；
setTimeout
隔了一段时间后再执行函数；
起到推迟执行的作用；
并且只执行一次；
setInterval 和 timer 和 setTimeout 的 timer 不会重复的；
setTimeout(function(){
console.log("abc");
},2000);
这段代码的意思是说：推迟2秒后再执行这个函数；
用在哪儿呢？
应用1：一部电影，有个试看期，5分钟后，就不让看了；
应用2：打开一个页面，在延迟个几秒后，弹出一个广告；
clearTimeout
有延迟执行的，就有清除延迟的；
var timer = setTimeout(function(){
console.log("abc");
},2000);
clearTimeout(timer);
全局对象window上的方法，内部函数 this 指向 window ；
setInterval("func()",1000); 也能执行；
setInterval("cosole.log('a');",1000) // 这种写成字符串的也能执行
练习题：
写一个计时器，到3分钟停止；
HTML：
这样两个 input ：
让 seconds 每秒增加1 ，走到 60 时归零继续累计，让minutes 增加1 ；到3分钟后停止；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计时器</title>
<style>
input{
border: 1px solid rgba(0,0,0,0.8);
text-align: right;
}
</style>
</head>
<body>
<p>minutes:<input type="text" value="0" name="minutes"></p>
<p>seconds:<input type="text" value="0" name="seconds"></p>
<script>
var minutesNode = document.getElementsByTagName('input')[0];
var secondsNode = document.getElementsByTagName('input')[1];
var minutes = 0;
var seconds = 0;
var timer = setInterval(function(){
seconds ++;
if (seconds == 60){
seconds = 0;
minutes ++;
}
secondsNode.value = seconds;
minutesNode.value = minutes;
if (minutes == 3){
clearInterval(timer);
}
},100);
</script>
</body>
</html>
有兴趣的可以试一下；
