【JavaScript】定时器的使用

阿航的笔记

已于 2024-03-29 16:46:26 修改

阅读量1.6k

点赞数 15

文章标签： javascript 开发语言

于 2024-03-29 16:23:23 首次发布

本文链接：https://blog.csdn.net/zyh0815/article/details/137148008

版权

本文详细介绍了JavaScript中的定时器setInterval和setTimeout的基本用法，以及如何清除它们。通过实例演示了如何在发送验证码和秒杀倒计时场景中运用定时器。

摘要由CSDN通过智能技术生成

文章目录

一、JS定时器是什么？
二、定时器的使用
二、定时器实例一（发送验证码）
三、定时器实例二（秒杀倒计时）

提示：以下是本篇文章正文内容，下面案例可供参考

一、JS定时器是什么？

JavaScript定时器是一种用于在指定时间间隔后执行指定函数的方法。

二、定时器的使用

1.定时器之setInterval

代码如下（示例）：

<script>
        // 1. setInterval 每隔一段时间就去调用这个回调函数 重复调用
        // 语法规范: window.setInterval(回调函数,间隔时间)
        setInterval(function () {
            console.log('继续输出')
        }, 2000);
        //2. setTimeout 延时时间到了，就去调用这个回调函数，只调用一次，就结束了

    </script>

2.定时器之setTimeout

代码如下（示例）：

<script>
        //setTimeout
        //语法规范：window.setTimeout(回调函数,延迟时间)
        //1. window在调用时可以省略
        //2. 延时时间单位是毫秒 可以省略 省略默认是0
        //3. 调用函数可以直接写函数 还可以写函数名 还有一个写法 '函数名()'
        //4. 页面中可能有很多定时器 我们经常给定时器加标识符 （名字）
        // setTimeout(function () {
        //     console.log('2000毫秒后执行')
        // },
        //     2000);
        function boom() {
            console.log('爆炸了');
        }
        var timer1 = setTimeout(boom, 2000);
        var timer2 = setTimeout(boom, 3000);
        // setTimeout('boom()', 2000); // 不提倡这个写法
    </script>

setTimeout 是用于延迟单次执行，而 setInterval 用于周期性重复执行。

3.清除定时器clearInterval

代码如下（示例）：

<body>
    <button class="begin">开启定时器</button>
    <button class="stop">清除定时器</button>
    <script>
        let begin = document.querySelector('.begin');
        let stop = document.querySelector('.stop');
        let timer = null;
        begin.onclick = function () {
            timer = setInterval(function () {
                console.log('定时器执行了');
            }, 1000);
        }
        stop.onclick = function () {
            clearInterval(timer);
        }
    </script>
</body>

4.清除定时器clearTimeout

代码如下（示例）：

<body>
    <button>点击停止定时器</button>
    <script>
        let btn = document.querySelector('button');
        let timer1 = setTimeout(function () {
            console.log('2000毫秒后执行')
        }, 2000);
        btn.addEventListener('click', function () {
            clearTimeout(timer1);
        })
    </script>
</body>

二、定时器实例一（发送验证码）

代码如下（示例）：

<body>
    手机号：<input type="text" id="phone">
    <button id="btn">发送验证码</button>
    <script>
        //按钮点击之后，会禁用disabled属性为true
        //同时按钮里的内容会变化，注意button里面的内容通过innerHTML修改
        //里面秒数的变化需要用到定时器
        //定义一个变量，在定时器里，不断递减
        // 如果变量为0 说明到了时间 需要停止定时器 并且复原按钮初始状态
        let btn = document.getElementById('btn');
        let time = 10;
        btn.addEventListener('click', function () {
            btn.disabled = true;
            let timer = setInterval(function () {
                if (time == 0) {
                    // 清除定时器和复原按钮
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = '发送验证码';
                    time = 10;  //重新开始
                } else {
                    btn.innerHTML = time + 's后重新发送';
                    time--;
                }
            }, 1000);
        })
    </script>
</body>

实现效果
在这里插入图片描述

三、定时器实例二（秒杀倒计时）

这段代码实现了点击按钮后开始倒计时，倒计时期间按钮不可点击，倒计时结束后恢复可点击状态并可以再次发送验证码的功能。
1、先获取页面中的按钮元素，并添加点击事件监听器。
2、当按钮被点击时：立即禁用按钮（btn.disabled = true），防止用户短时间内频繁点击。
3、初始化倒计时时间为10秒，并启动定时器。定时器每1000毫秒（1秒）执行一次回调函数
let inputTime = +new Date(‘2024-03-29 18:00:00’);
修改具体时间，设置倒计时
代码如下（示例）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .hour,
        .minute,
        .second {
            display: inline-block;
            width: 30px;
            height: 30px;
            border-radius: 10%;
            color: white;
            background-color: black;
            text-align: center;
            line-height: 30px;
        }
    </style>
</head>

<body>
    <div><span class="hour">1</span>
        <span class="minute">2</span>
        <span class="second">3</span>
    </div>
    <script>
        // 1.获取元素
        let hour = document.querySelector('.hour');
        let minute = document.querySelector('.minute');
        let second = document.querySelector('.second');
        let inputTime = +new Date('2024-03-29 18:00:00'); //返回用户输入时间总的毫秒数
        // 2.开启定时器
        setInterval(countDown, 1000);
        // 3.定义函数
        function countDown() {
            let nowTime = +new Date(); //返回当前时间总的毫秒数
            let times = (inputTime - nowTime) / 1000; //返回剩余时间的秒数
            let h = parseInt(times / 3600 % 24); //小时
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h; //把小时赋值给hour
            let m = parseInt(times / 60 % 60); //分钟
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;
            let s = parseInt(times % 60); //秒
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;
        }

    </script>
</body>

</html>