前言

JS中定时器并不算难点，但是我还是拿出来讲，过于经典的案例往往是最为基础的知识点，仅供参考学习。

一、定时器

setTimeout(code,millisec)：只执行 code 一次。
setInterval(code,millisec)：会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

定时器注释

clearTimeout() ：可取消由 setTimeout() 方法设置的 timeout。
clearInterval() ：可取消由 setInterval() 设置的 timeout。

定时器非常好理解，set就是定时器，clear就是清除定时器，timeout就是定时器只用一次，interval就是循环使用。

二、定时器的使用

1.定时器

代码如下（示例）：

<body>
<script>javascript">
    function time() {
        alert('倒计时时间到')
    }
    var times = setTimeout(time,3000);
</script>
</body>

倒计时弹窗

2.清除定时器

<body>
<script>javascript">
    function time() {
        alert('倒计时时间到')
    }
    var times = setTimeout(time,3000);
    clearInterval(times);
</script>
</body>

setInterval（）和cleaInterval（）的原理也是一样的，我就不在这里写了

三、案例

1.倒计时

代码如下（示例）：

    <style>
        div {
            margin: 200px;
        }

        span {
            display: inline-block;
            width: 40px;
            height: 40px;
            background-color: #333;
            font-size: 20px;
            color: #fff;
            text-align: center;
            line-height: 40px;
        }
    </style>
</head>

<body>
    <div>
        <span class="hour">1</span>
        <span class="minute">2</span>
        <span class="second">3</span>
    </div>
    <script>javascript">
        // 1. 获取元素
        var hour = document.querySelector('.hour'); // 小时的黑色盒子
        var minute = document.querySelector('.minute'); // 分钟的黑色盒子
        var second = document.querySelector('.second'); // 秒数的黑色盒子
        var inputTime = +new Date('2021-7-9 00:00:00'); // 返回的是用户输入时间总的毫秒数
        countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白
        // 2. 开启定时器
        setInterval(countDown, 1000);

        function countDown() {
            var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数
            var h = parseInt(times / 60 / 60 % 24); //时
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子
            var m = parseInt(times / 60 % 60); // 分
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;
            var s = parseInt(times % 60); // 当前的秒
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;
        }
    </script>
</body>

效果图如下：
倒计时效果图

2.使用和清除定时器

代码如下（示例）：

<body>
<button class="begin">开启定时器</button>
<button class="stop">停止定时器</button>
<p></p> 
<script>javascript">
    var begin = document.querySelector('.begin');
    var stop = document.querySelector('.stop');
    var p  = document.querySelector('p');
    var timer = null; // 全局变量  null是一个空对象
    begin.addEventListener('click', function() {
        timer = setInterval(function() {
            p.innerHTML+='起飞！';
        }, 1000);
    })
    stop.addEventListener('click', function() {
        clearInterval(timer);
    })
</script>
</body>

效果图如下：
在这里插入图片描述

3.发送短信

代码如下（示例）：

<body>
<label>
    手机号码：
    <input type="number">
</label>
<button>发送</button>
    <script>javascript">
        // 按钮点击之后，会禁用 disabled 为true 
        // 同时按钮里面的内容会变化， 注意 button 里面的内容通过 innerHTML修改
        // 里面秒数是有变化的，因此需要用到定时器
        // 定义一个变量，在定时器里面，不断递减
        // 如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态
        var btn = document.querySelector('button');
        var time = 3; // 定义剩下的秒数
        btn.addEventListener('click', function() {
            btn.disabled = true;
            var timer = setInterval(function() {
                if (time == 0) {
                    // 清除定时器和复原按钮
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = '发送';
                } else {
                    btn.innerHTML = '还剩下' + time + '秒';
                    time--;
                }
            }, 1000);

        })
    </script>
</body>