当前位置：首页 > news >正文

【JavaScript】十二、定时器

news 来源：原创 2025/6/25 20:32:08

文章目录

1、定时器-间歇函数
- 1.1 开启定时器
- 1.2 关闭定时器
2、定时器-延时函数
- 2.1 开启定时器
- 2.2 关闭定时器
- 2.3 两个定时器函数的对比
3、案例：阅读注册协议
4、案例：轮播图定时器版

网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码 ==> 定时器函数，定时器函数有两种：

间歇函数（setInterval）
延时函数（setTimeout）

1、定时器-间歇函数

1.1 开启定时器

语法：

在这里插入图片描述

作用：每个一段时间就调用这个函数
示例：

<body>
    <script>
        function repeat() {
            console.log('间歇函数执行。。。')
        }
        // 1000，单位毫秒，即一秒
        // 函数只写名字，不加括号，如果要加括号，还要加引号，'repeat()'，一般不用这种写法
        setInterval(repeat, 1000)
    </script>
</body>

函数有参数

// arg1, arg2, ...是传递给回调函数的参数（可选）
setInterval(callback, delay, arg1, arg2, ...);

<body>
    <script>
        function repeat(num1, num2) {
            console.log(`间歇函数执行:${num1 + num2}`)
        }
        // 函数只写名字，不加括号
        // 1000，单位毫秒，即一秒
        // num1 = 1, num2 = 2
        setInterval(repeat, 1000, 1, 2)
    </script>
</body>

1.2 关闭定时器

语法：

在这里插入图片描述

示例：

<body>
    <script>
        // 定时器返回的是一个id数字
        let timer = setInterval(function () {	//匿名函数
            console.log('间歇函数执行。。。')
        }, 1000)
        // ...一段时间之后，或者满足某个条件时，关闭定时器
        // 关闭定时器
        clearInterval(timer)
    </script>
</body>

2、定时器-延时函数

2.1 开启定时器

语法：

setTimeout(callback, delay, arg1, arg2, ...);
// callback：要执行的函数
// delay：延迟时间（以毫秒为单位）
// arg1, arg2, ...：传递给回调函数的参数（可选）

作用：在指定的延迟时间后执行一个函数（仅执行一次）
示例：

<body>
    <script>
        function hello() {
            console.log(`延时函数执行，Hello World！`)
        }
        // 6秒后执行
        setTimeout(hello, 6000, 1, 2)
    </script>
</body>

2.2 关闭定时器

语法：

// 返回定时器 ID，可用于清除定时
// 这里不用const了，用let，因为定时器可能会重复打开关闭，比如轮播图鼠标悬停与鼠标移开
let intervalId = setTimeout(函数, 延迟时间)

clearInterval(intervalId)

2.3 两个定时器函数的对比

特性	setInterval	setTimeout
执行次数	重复执行，一旦开启，永不停歇	仅执行一次
用途	周期性任务（如轮询、动画）	延迟执行任务（如延迟加载、超时处理）
清除方法	clearInterval	clearTimeout

相同点：如果不再需要定时器，务必使用 clearInterval 或 clearTimeout 清除，以避免内存泄漏

3、案例：阅读注册协议

需求：按钮60秒之后才可以使用

<body>
    <textarea name="" id="" cols="30" rows="10">
        《用户注册协议》
        欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。
        【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看
    </textarea>
    <br>
    <button class="btn">我已经阅读用户协议(5)</button>


    <script>
        const button = document.querySelector('.btn')
        let total = 5
        button.disabled = true
        // 定时器
        let timer = setInterval(function () {
            total--
            // button虽然属于表单大类，但获取值不能用value，而是之前到innerHTML
            button.innerHTML = `我已经阅读用户协议(${total})`
            if (total === 0) {
                clearInterval(timer)
                button.disabled = false
                button.innerHTML = '我同意'
            }
        }, 1000)

    </script>
</body>

效果：

在这里插入图片描述

4、案例：轮播图定时器版

需求：每隔一秒钟自动切换一个图片

实现方式：在上一篇的基础上稍微改下，不再是随机一条数据，而是依次轮循每条数据，一秒钟执行一次，达到一秒钟一切换的效果

在这里插入图片描述
改完后，发现上面这个bug，轮播时忘了取消前面li标签小圆点的样式，修改下：

在这里插入图片描述

但这样写复杂了，改个实现：先删除以前的active，再让当前的li标签添加active样式

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

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>轮播图点击切换</title>
  <style>
    * {
      box-sizing: border-box;
    }

    .slider {
      width: 560px;
      height: 400px;
      overflow: hidden;
    }

    .slider-wrapper {
      width: 100%;
      height: 320px;
    }

    .slider-wrapper img {
      width: 100%;
      height: 100%;
      display: block;
    }

    .slider-footer {
      height: 80px;
      background-color: rgb(100, 67, 68);
      padding: 12px 12px 0 12px;
      position: relative;
    }

    .slider-footer .toggle {
      position: absolute;
      right: 0;
      top: 12px;
      display: flex;
    }

    .slider-footer .toggle button {
      margin-right: 12px;
      width: 28px;
      height: 28px;
      appearance: none;
      border: none;
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      border-radius: 4px;
      cursor: pointer;
    }

    .slider-footer .toggle button:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .slider-footer p {
      margin: 0;
      color: #fff;
      font-size: 18px;
      margin-bottom: 10px;
    }

    .slider-indicator {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      align-items: center;
    }

    .slider-indicator li {
      width: 8px;
      height: 8px;
      margin: 4px;
      border-radius: 50%;
      background: #fff;
      opacity: 0.4;
      cursor: pointer;
    }

    .slider-indicator li.active {
      width: 12px;
      height: 12px;
      opacity: 1;
    }
  </style>
</head>

<body>
  <div class="slider">
    <div class="slider-wrapper">
      <img src="./images/slider01.jpg" alt="" />
    </div>
    <div class="slider-footer">
      <p>对人类来说会不会太超前了？</p>
      <ul class="slider-indicator">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <div class="toggle">
        <button class="prev">&lt;</button>
        <button class="next">&gt;</button>
      </div>
    </div>
  </div>
  <script>
    // 1. 初始数据
    const sliderData = [
      { url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
      { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
      { url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
      { url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
      { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
      { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
      { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
      { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
    ]

    let index = 1

    // 定时器
    setInterval(function () {
      // 轮播，如果到最后一条数据了，那就数组索引重置为0，从头重新开始
      if (index === sliderData.length) {
        index = 0
      }

      //  获取DOM对象
      const img = document.querySelector('.slider-wrapper img')
      const p = document.querySelector('.slider-footer p')
      const div = document.querySelector('.slider-footer')
      const data = sliderData[index]

      // 修改DOM
      img.src = data.url
      p.innerHTML = data.title
      div.style.backgroundColor = data.color

      // 删除li标签的active样式，再让当前li添加active，实现小圆点选中
      const hasActive = document.querySelector('.slider-indicator .active')
      hasActive.classList.remove('active')
      // index是0-7，而无序列表下的li是1-8，所以加1
      const li = document.querySelector(`.slider-indicator li:nth-child(${index + 1})`)
      li.classList.add('active')
      index++
    }, 1000)
  </script>
</body>

</html>