【JS】定时器的使用（点击开始计时，再次点击停止计时）

一.JS的两个定时器方法

JS 提供了两个原生定时器函数，都挂载在window对象上，分别是间歇函数setInterval()和延迟函数setTimeout()。

setInterval(fn回调函数，间隔时间)：每隔一段间隔时间执行一次回调函数。（重复执行）
setTimeout(fn回调函数，间隔时间)：延迟一定间隔时间后执行一次回调函数。（只执行一次）

1. 定时器：间歇函数-setInterval()

1.1 开启定时器 setInterval（回调函数，间隔时间）

javascript 复制代码

setInterval（回调函数，间隔时间）    //间隔时间单位是毫秒。

可以在定时器里面定义回调函数，也可以在定时器外面定义回调函数。

在定时器外面定义 回调函数的话，定时器的第一个参数只写函数名不加小括号！

javascript 复制代码

<script>
    //情况一：内部直接定义
    setInterval(function(){
      console.log("一秒执行一次")
    },1000)
    //情况二：外部定义
    function fn(){
      console.log("一秒执行一次")
    }
    setInterval(fn,1000)  //回调函数只写函数名不加小括号
</script>

1.2 关闭定时器 clearInterval(定时器ID号)

setInterval()会返回一个数字类型的唯一ID，用于标识不同的定时器，这个ID是清除定时器的唯一凭证。我们可以用一个变量接受定时器的ID，再将这个变量传入clearInterval。

javascript 复制代码

let timeID = setInterval(fn,1000)
clearInterval(timeID)

2. 定时器-延迟函数setTimeout(回调函数，等待的毫秒数)

setTimeout()只执行一次，可以理解为就是把一段代码延迟执行。

2.1 开启定时器 setTimeout(回调函数，等待的毫秒数)

javascript 复制代码

setTimeout(回调函数，等待的毫秒数)

2.2 清除延时函数 clearTimeout（timeID）

setTimeout()也会返回一个定时器标识ID。

javascript 复制代码

let timeID = setTimeout(fn,1000)
clearTimeout(timeID)

二.制作一个点击开启计时，再次点击结束计时的vue组件

需求：点击按钮切换开始/停止计时，停止后保留计时结果，再次开始继续计时，以分：秒：毫秒显示

思路：

数据部分：

设置运行状态 isRunning ,记录计时器是否在运行，初始值设为0。
设置计时器经历的时间 elapsedTime ,记录计时器的时间，初始为false.
设置开始时间 startTime ，记录计时器开始运行的时间戳,初始为0。
设置一个计时器ID号 timer，记录计时器ID，用于停止计时器，初始为null。

函数部分：

设置一个切换函数toggleTimer,绑定在计时按钮上。
若计时器运行状态为True，则暂停计时，并将运行状态置为false。
若计时器运行状态为False，则开始计时：记录开始时间，更新时间，并且将运行状态置为True。
设置清零函数resetTimer,点击按钮就暂停计时器，并将数据全部清0.
设置时间戳格式化函数formattedTime。

计时页面如下：

组件代码如下：

javascript 复制代码

<template>
  <div class="timer">
    <div class="time-display">{{ formattedTime }}</div>
    <button @click="toggleTimer">{{ isRunning ? '暂停计时' : '开始计时' }}</button>
    <button @click="resetTimer">清零</button>
  </div>
</template>

<script setup >
import { ref, computed } from 'vue';
    // 响应式数据
    const startTime = ref(0);  // 记录计时器开始时的时间戳
    const elapsedTime = ref(0);  // 记录经过的时间（毫秒）
    const isRunning = ref(false);  // 计时器是否在运行
    let timer = null;  // 定时器ID
    // 格式化时间显示，精确到毫秒
    const formattedTime = computed(() => {
      const milliseconds = Math.floor(elapsedTime.value % 1000/10);
      const seconds = Math.floor(elapsedTime.value / 1000) % 60;
      const minutes = Math.floor(elapsedTime.value / 60000);
      
      return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}:${String(milliseconds).padStart(2, '0')}`;
    });
    // 切换开始计时/暂停计时
    const toggleTimer = () => {
      //如果计时器正在运行，点击按钮则暂停计时
      if (isRunning.value) {
        // 暂停计时
        clearInterval(timer);
        isRunning.value = false;
      } else {
      //如果计时器未运行，点击按钮则开始计时
        // 开始计时
        startTime.value = Date.now() - elapsedTime.value;  // 记录开始时间戳
        //更新时间
        const updateTime = () => {
          if (isRunning.value) {
            elapsedTime.value = Date.now() - startTime.value;
            timer = setInterval(updateTime,10);  //每隔10毫秒更新一次时间
          }
        };
        isRunning.value = true;
        updateTime();
    };
  }
    // 清零计时器
    const resetTimer = () => {
      clearInterval(timer);
      timer = null;
      elapsedTime.value = 0;
      startTime.value = 0;
      isRunning.value = false;
    };
</script>

<style scoped>
.timer {
  text-align: center;
  font-size: 24px;
  margin-top: 20px;
}
.time-display {
  font-size: 48px;
  margin-bottom: 20px;
}
button {
  padding: 10px 20px;
  margin: 10px;
  font-size: 16px;
  cursor: pointer;
}
</style>

最后

如果这篇文章对你有帮助的话就点个赞吧！