setInterval() 定时器 - 实现发送短信倒计时

知识点 - 清除定时器setInterval()

clearInterval()方法取消了先前通过调用 setInterval()建立的定时器。

 window.clearInterval(intervalID);

注意：

1. window 可以省略。

2. 里面的参数就是定时器的标识符 。

案例： 发送短信

点击按钮后，该按钮60秒之内不能再次点击，防止重复发送短信

案例分析

• 按钮点击之后，会禁用 disabled 为true
• 同时按钮里面的内容会变化， 注意 button 里面的内容通过 innerHTML修改
• 里面秒数是有变化的，因此需要用到定时器
• 定义一个变量，在定时器里面，不断递减
• 如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态。

代码

手机号码： <input type="number"> <button>发送</button>
<script>
    var text = document.querySelector('input');
    var btn = document.querySelector('button');
    var timer = null;
    var num = 5;
    btn.addEventListener('click', function(){
        if (text.value != '') {
            btn.disabled = true;
            timer = setInterval(() => {
                if (num === 0) {
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML =  '发送';
                    // 需要给 num 重新赋值为5，第一轮结束后num值--为0
                    num = 5;
                }else{
                    btn.innerHTML =  num +'s后重新发送';
                    num--;
                }
            }, 1000);
        }else{
            alert("请输入内容!");
        }
    });
</script>