Js中关于按钮倒计时显示（setTimeout 和 setInterval）-CSDN博客

本文链接：https://blog.csdn.net/yicunyangguang/article/details/114011716

目标：实现一个按钮点击，同时按钮禁用并显示倒计时的js功能函数。

分析：首先要有一个按钮，绑定一个事件，这个事件功能就是定时改变按钮显示值，同时禁止按钮进行二次点击。

此功能函数需要使用js周期调用函数 setTimeout 或则 setInterval，两个方法都可以实现定时改变显示值。

setTimeout 和 setInterval的区别是什么？其实 setTimeout 和 setInterval 的最本质的区别是触发 setTimeout 方法只执行一次，而触发 setInterval 方法只要不执行clearInterval方法是不会停止的。

解决方案：

方法1：使用setTimeout方法

JS代码如下：

    <input type="button" id="btn" value="免费获取验证码" />
    <script type="text/javascript">
        //倒计时限制秒数
        var countdown = 5;
        var id;//该变量用作停止定时执行函数
        function setTime(targetElement) {
            if (countdown == 0) {
                targetElement.removeAttribute("disabled");
                targetElement.value = "免费获取验证码";
                countdown = 5;
                clearTimeout(id);//关闭定时执行函数
            } else {
                targetElement.setAttribute("disabled", true);
                targetElement.value = "重新发送(" + countdown + ")";
                countdown--;
                id = setTimeout(function () { setTime(targetElement) }, 1000);//下次定时调用setTime
            }
        }
        document.getElementById("btn").onclick = function () { setTime(this); }
    </script>

该方法在每次改变按钮显示值后下次调用使用setTimeout方法定时调用。

方法2：使用setInterval方法

JS代码如下：

    <input type="button" id="btn" value="免费获取验证码" onclick="setTime(this)" />
    <script type="text/javascript">
        function setTime(targetElement) {
            //倒计时初始化秒数
            var countdown = 5;
            var id = setInterval(setCountdown, 1000, targetElement);
            //设置倒计时
            function setCountdown(targetElement) {
                if (countdown == 0) {
                    targetElement.removeAttribute("disabled");
                    targetElement.value = "免费获取验证码";
                    countdown = 5;
                    clearInterval(id);//停止调用函数
                } else {
                    targetElement.setAttribute("disabled", true);
                    targetElement.value = "重新发送(" + countdown + ")";
                    countdown--;
                }
            }
        }
    </script>

该方法按周期定时调用，等待时间为0的时候停止该周期调用函数。