JavaScript两大定时器


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.总结

  终于说完了,累死我了,关于这两个定时器,我知道的也就这么多了,谢谢打赏!!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值