Js定时器倒计时及堆叠问题解析（附源码）

最新推荐文章于 2024-04-30 16:57:21 发布

代码里的光

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量617

点赞数 1

分类专栏： Web 文章标签： javascript webstorm Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_63706832/article/details/129658985

版权

Web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

今天，我们要实现的是一个超级小的demo，倒计时的简单实现，但是其中遇到的定时器的叠加问题，值得思考，所以写了这一篇文章。本人小白一个，多有不足，欢迎交流，共同进步。

HTML+CSS部分

这里的东西，不做过多的赘述哈，文末会有完整的源码哦。

 <style type="text/css">
    #box {
      width: 100px;
      height: 100px;
      line-height: 100px;
      font-size: 40px;
      margin: 30px auto;
      border: solid 4px black;
      text-align: center;
    }

    input {
      display: block;
      margin: 0 auto;
    }
  </style>

  <div id="box">5</div>
  <input type="button" name="btn" id="startbtn" value="开始" />
  <input type="button" name="btn" id="stopbtn" value="停止" />

JS部分

当前的状态下，未添加任何的JS代码，效果是：

现在开始梳理一下思路哈。

我们要做的就是给开始按钮添加一个定时器，并且让上方的数字开始减少，而停止就是清除定时器最后数字恢复初始状态。

获取页面节点

    var boxObj = document.querySelector('#box');
    var startObj = document.querySelector('#startbtn');
    var stopObj = document.querySelector('#stopbtn');

获取页面中数字，并作为初识值

现在要获取页面中的数字，不仅仅是待会执行减减操作时的初始值，再开始点击事件结束之后，我们需要把页面中的数值，重新变为初始状态。所以这一步是很有必要的。

var initVal = boxObj.innerHTML;

相对的按钮设置点击事件

重点就在这里，本来案例来说，我们只需要设置相应的定时器，让数字减少就够了，但是，当我设置后发现情况不对。

正常思路：假设单纯设置定时器，那就是当数字缩减到-1的时候结束并清除定时器，使页面中的数字恢复初始值。（如果是0的话，判断条件就到0，这样就倒计时不到0了）。

代码应该如下：

<script>
    // 首先获取页面节点
    var boxObj = document.querySelector('#box');
    var startObj = document.querySelector('#startbtn');
    var stopObj = document.querySelector('#stopbtn');
    //2 获取页面中的数字,作为初始值,最后倒计时完了，还得是初始值
    var initVal = boxObj.innerHTML;
    // 绑定点击事件
    var times;
    startObj.onclick = function () {
        times = setInterval(function () {
            // 获取当前的数字
            var num = boxObj.innerHTML;
            // 执行减减操作
            num--;
            // 再扔回去
            boxObj.innerHTML = num;
            //判断停止的条件
            if (num == -1) {
            //清楚定时器
                clearInterval(times);
            //变为初始值
                boxObj.innerHTML = initVal;
            }
        }, 1000)
    }
</script>

情况发生

但是，就现在开始的点击，就发现了问题的所在，那就是，当我们点击开始按钮的时候，倒计时就开始了，但是，当我们再倒计时没有结束的时候，再次点击，多次点击开始按钮的时候，发现，一直循环倒计时。这就是典型的定时器堆叠现象。

解决方法

我们给接收定时器的times一个判断，当点击事件发生的时候，如果times有不为0，Nan，Null，undefined,'空字符串'的情况，就直接用return结束代码的执行，这样我们多次点击的时候，就会首先判断，如果有了就不会开启新的定时器。

注意：点击事件开始的时候就去创建一个判断，这是很好的操作，但是，如果我们第一次点击，执行代码时，times的状态就是true了，当我们--操作结束之后，想要再次点击的时候，发现无法点击了，这就是因为第12行的判断，所以再定时器结束条件中，应重置times的状态。

<script>
    // 首先获取页面节点
    var boxObj = document.querySelector('#box');
    var startObj = document.querySelector('#startbtn');
    var stopObj = document.querySelector('#stopbtn');
    //2 获取页面中的数字,作为初始值,最后倒计时完了，还得是初始值
    var initVal = boxObj.innerHTML;
    // 绑定点击事件
    var times;
    startObj.onclick = function () {
        //判断时候有定时器的存在了
        if (times) return;
        times = setInterval(function () {
            // 获取当前的数字
            var num = boxObj.innerHTML;
            // 执行减减操作
            num--;
            // 再扔回去
            boxObj.innerHTML = num;
        //判断停止的条件
            if (num == -1) {
        //清除定时器
                clearInterval(times);
    //这一句是为了在结束的时候
//此时，定时器的状态应该是true，如果不重新设置定时器的状态
//就会进入第12行的if中去，也就不再有新的定时器执行--操作了
                times = null;
                boxObj.innerHTML = initVal;
            }
        }, 1000)
    }
</script>

结束按钮大有不同

本来来说，点击停止就是简单的清除定时器，而我们一开始也是这样操作的。

    // 点击停止则暂停执行
    stopObj.onclick = function () {
        clearInterval(times);
    }

但是，我们发现，没有办法点击开始按钮了，这是因为，我们点击暂停的时候，times定时器被我们强制结束掉了，但是现在结束的状态时true，又是第12行，这句话，导致不会进行继续了，所以，在点击结束的时候，也应该设置times的状态为null，从而进入定时器的函数体。

疑惑

笔者一开始很疑惑，当我们点击停止之后，页面停止在--操作的数字，假设是3，但是当我们点击开始的时候，是怎么从3开始，并接着继续的呢。后来我才明白。

我们无论--操作到数字几，只要设置了times为null，他就会进入第39行的定时器函数体中，而我们的第一条语句就是获取当前页面的数字，所以减减进行到多少都没有关系。

源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #box {
            width: 100px;
            height: 100px;
            line-height: 100px;
            font-size: 40px;
            margin: 30px auto;
            border: solid 4px black;
            text-align: center;
        }

        input {
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="box">5</div>
<input type="button" name="btn" id="startbtn" value="开始"/>
<input type="button" name="btn" id="stopbtn" value="停止"/>
<script>
    // 首先获取页面节点
    var boxObj = document.querySelector('#box');
    var startObj = document.querySelector('#startbtn');
    var stopObj = document.querySelector('#stopbtn');
    //2 获取页面中的数字,作为初始值,最后倒计时完了，还得是初始值
    var initVal = boxObj.innerHTML;
    // 绑定点击事件
    var times;
    startObj.onclick = function () {
        //判断时候有定时器的存在了
        if (times) return;
        times = setInterval(function () {
            // 获取当前的数字
            var num = boxObj.innerHTML;
            // 执行减减操作
            num--;
            // 再扔回去
            boxObj.innerHTML = num;
            //判断停止的条件
            if (num == -1) {
                //清除定时器
                clearInterval(times);
                //这一句是为了在结束的时候
        //此时，定时器的状态应该是true，如果不重新设置定时器的状态
        //就会进入第12行的if中去，也就不再有新的定时器执行--操作了
                times = null;
                boxObj.innerHTML = initVal;
            }
        }, 1000)
    }
    // 点击停止则暂停执行
    stopObj.onclick = function () {
        clearInterval(times);
        // times = null;
    }

</script>
</body>
</html>