JavaScript两大定时器

最新推荐文章于 2021-12-09 21:25:30 发布

wu123wu3

最新推荐文章于 2021-12-09 21:25:30 发布

阅读量445

点赞数 1

文章标签： 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，表示没有定时器，就可以创建定时器，从而有效的避免上述出现的问题。