js中的两种定时器区别是什么以及怎么清除定时器详解

// 基础语法：返回定时器ID（用于后续清除定时器）
const timeoutId = setTimeout(callback, delay, [param1, param2, ...]);

// 示例1：基础使用——3秒后一次性执行回调
const timeoutId1 = setTimeout(() => {
  console.log("3秒后执行，仅执行一次");
}, 3000);

console.log("定时器已创建，ID为：", timeoutId1); // 输出：定时器已创建，ID为：1（不同环境ID可能不同）

// 示例2：传递参数给回调函数
const timeoutId2 = setTimeout((name, age) => {
  console.log(`你好，我是${name}，今年${age}岁`);
}, 2000, "张三", 25); // 2秒后输出：你好，我是张三，今年25岁

// 示例3：延迟时间为0（非立即执行，进入任务队列等待执行）
setTimeout(() => {
  console.log("延迟0毫秒，最后执行");
}, 0);

console.log("同步代码，先执行");
// 输出顺序：同步代码，先执行 → 延迟0毫秒，最后执行

// 基础语法：返回定时器ID（用于后续清除定时器）
const intervalId = setInterval(callback, delay, [param1, param2, ...]);

// 示例1：基础使用——每隔2秒重复执行回调
let count = 0;
const intervalId1 = setInterval(() => {
  count++;
  console.log(`已执行${count}次，每隔2秒执行一次`);
}, 2000);

// 示例2：传递参数给回调函数，实现倒计时
let remainingTime = 10;
const intervalId2 = setInterval((title) => {
  remainingTime--;
  console.log(`${title}：剩余${remainingTime}秒`);
  if (remainingTime <= 0) {
    console.log("倒计时结束");
    // 后续会详解：倒计时结束后清除定时器
    clearInterval(intervalId2);
  }
}, 1000, "秒杀活动"); // 每隔1秒输出一次倒计时

// 1. setTimeout()：仅执行一次
setTimeout(() => {
  console.log("setTimeout：我只执行一次");
}, 1000);

// 2. setInterval()：重复执行，需手动清除
let times = 0;
const intervalId = setInterval(() => {
  times++;
  console.log(`setInterval：我执行了${times}次`);
  if (times === 3) {
    clearInterval(intervalId); // 执行3次后手动清除
    console.log("setInterval：我被清除了，停止执行");
  }
}, 1000);

setTimeout：我只执行一次
setInterval：我执行了1次
setInterval：我执行了2次
setInterval：我执行了3次
setInterval：我被清除了，停止执行

// timeoutId 是 setTimeout() 返回的定时器ID
clearTimeout(timeoutId);

// 1. 创建一次性定时器
const timeoutId = setTimeout(() => {
  console.log("该回调不会被执行，因为定时器被提前清除了");
}, 3000);

console.log("创建定时器，准备2秒后清除它");

// 2. 提前2秒清除定时器（此时回调还未执行）
setTimeout(() => {
  clearTimeout(timeoutId);
  console.log("定时器已被清除，回调终止执行");
}, 2000);

// intervalId 是 setInterval() 返回的定时器ID
clearInterval(intervalId);

// 1. 创建周期性定时器（实现倒计时）
let countdown = 5;
const intervalId = setInterval(() => {
  countdown--;
  if (countdown > 0) {
    console.log(`倒计时剩余：${countdown}秒`);
  } else {
    console.log("倒计时结束，清除定时器");
    // 2. 倒计时结束，清除周期性定时器
    clearInterval(intervalId);
  }
}, 1000);

倒计时剩余：4秒
倒计时剩余：3秒
倒计时剩余：2秒
倒计时剩余：1秒
倒计时结束，清除定时器

// 错误示例：未保存定时器ID，无法精准清除
setInterval(() => {
  console.log("无法精准清除，只能一直执行到页面卸载");
}, 1000);

// 正确示例：保存定时器ID，便于后续精准清除
const intervalId = setInterval(() => {
  console.log("可通过ID精准清除");
}, 1000);
clearInterval(intervalId);

<template>
  <div>组件倒计时：{{ countdown }}</div>
</template>

<script>
export default {
  data() {
    return {
      countdown: 10,
      intervalId: null // 保存定时器ID
    };
  },
  mounted() {
    // 创建周期性定时器
    this.intervalId = setInterval(() => {
      this.countdown--;
      if (this.countdown <= 0) {
        clearInterval(this.intervalId);
      }
    }, 1000);
  },
  beforeUnmount() {
    // 组件卸载前清除定时器，避免泄漏
    if (this.intervalId) {
      clearInterval(this.intervalId);
    }
  }
};
</script>

const timeoutId = setTimeout(() => {
  console.log("该回调不会被执行");
}, 0);

clearTimeout(timeoutId); // 立即清除，回调无法执行

// 1. 清除已执行完毕的setTimeout()定时器
const timeoutId = setTimeout(() => {
  console.log("回调已执行");
}, 1000);

// 2秒后回调已执行，定时器已失效
setTimeout(() => {
  clearTimeout(timeoutId); // 无报错，静默失败
}, 2000);

// 3. 清除不存在的定时器ID
clearInterval(9999); // 无报错，静默失败

// 推荐：setTimeout() 嵌套，实现精准间隔的周期性执行
let count = 0;
function periodicExecute() {
  // 1. 执行核心业务逻辑
  count++;
  console.log(`执行第${count}次，间隔2秒`);

  // 2. 回调执行完毕后，创建下一个定时器，保证间隔准确
  if (count < 5) {
    setTimeout(periodicExecute, 2000);
  }
}

// 启动周期性执行
setTimeout(periodicExecute, 2000);

let isActive = true; // 状态标记
let count = 0;

const intervalId = setInterval(() => {
  // 增加状态判断，即使回调已入队，也不执行无效逻辑
  if (!isActive) return;
  
  count++;
  console.log(`执行第${count}次`);
}, 1000);

// 2.5秒后清除定时器
setTimeout(() => {
  isActive = false; // 先标记状态为无效
  clearInterval(intervalId); // 再清除定时器
  console.log("定时器已清除");
}, 2500);