0.前言
有一段时间没有写博客了，不过令我高兴地是写了这么长时间的文章，终于收到了关注和评价，在首页上通过了文章，非常高兴，也很兴奋！！好了言归正传，我来分享一下今天主要的知识点：间歇性定时器和延时定时器。学完这个，我们可以写一些时钟、秒表、进度条等有趣控件。
1.间歇性定时器——setInterval
格式：setInterval（参数1，参数2）；
参数：参数1表示函数名，参数2表示设置的时间（毫秒）；
功能：每间隔参数2时间，调用一次参数1函数；
返回值：定时器的id，可单位是毫秒以通过这个id关闭定时器
（1）创建定时器
var timer = setInterval(func,1000);
用一个变量保存定时器，注意，用setInterval创建定时器即启动，同时返回该定时的id。
（2）关闭定时器
既然创建了定时器，那么如何关闭定时器呢?
通过返回得到定时器的id，从而关闭定时器。用clearInterval方法。
clearInterval(timer);
其中的“timer”表示的是上面常见定时器器是所用的变量。
注意：JS中没有暂停一说，关闭就销毁了。如果需要继续运行，则需重新创建定时器。
2.延时定时器——setTimeout
格式：setTimeout(参数1，参数2);
参数：参数1表示的是函数名，参数2表示设置的时间（毫秒）；
功能：参数2时间后调用参数1函数；
返回值：返回定时器的id，可以通过该id关闭定时器
（1）创建定时器
var timer = setTimeout(func,1000);
（2）关闭定时器
clearTimeout(timer);
3.两者比较
用setInterval创建定时器是载入界面后，每间隔参数2个时间，执行一次参数1函数，是连续执行的；而setTimeout创建的定时器是先执行参数2，然后再执行参数1，记住只执行一次参数1，不是连续的。
4.案例
说了这么多，可能感觉到非常晕，下面我来用例子说明上面的问题。
（1）setInterval
首先我们打个界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器-间歇性定时器</title>
</head>
<body>
<button onclick="consoleInterval()">关闭定时器（暂停）</button>
<button onclick="goOn()">继续</button>
</body>
</html>
运行结果如下：
捕获.PNG
然后编写函数，在body标签里面添加如下代码：
<script type="text/javascript">
var timer = window.setInterval(func,1000);
function func() {
console.log("hello world!!!");
}
function consoleInterval() {
window.clearInterval(timer);
}
function goOn() {
timer = window.setInterval(func,1000);
}
</script>
此时在控制台上的结果为：
捕获.PNG
出现的bug
当我们连续点击“继续”按钮发现打印的速度变得非常快，而且再点击关闭定时器会发下，管不了，这是为什么呢？
因为，当我们连续点击继续按钮时，相当于创建了多个定时器，再点关闭按钮，他只能关闭当前最后一次点击时出现的定时器，前面创建的的定时器是关闭不了的，所以会出现上述情况。
解决办法：用一个变量来判断定时器是存在的还会被注销了。
修改js代码如下：
<script type="text/javascript">
var timer = window.setInterval(func,1000);
var flag = true;
function func() {
console.log("hello world!!!");
}
function consoleInterval() {
window.clearInterval(timer);
flag = false;
}
function goOn() {
if(flag){
return;
}
timer = window.setInterval(func,1000);
flag = true;
}
</script>
详解：
在一开始创建定时器时，将flag设置为true，表示当前存在定时器。当点击“关闭”按钮时，相当于销毁了定时器，此时将flag设置为false，表示没有定时器的存在；当调用“继续”按钮时，首先要判断flag，如果flag为true，表示当前有定时器，不需要创建了，不会再执行后面的代码，若果flag为false，表示没有定时器，就可以创建定时器，从而有效的避免上述出现的问题。
5.总结
终于说完了，累死我了，关于这两个定时器，我知道的也就这么多了，谢谢打赏！！！
网友评论