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>
运行结果如下:
然后编写函数,在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>
此时在控制台上的结果为:
出现的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.总结
终于说完了,累死我了,关于这两个定时器,我知道的也就这么多了,谢谢打赏!!!