17370845950

JavaScript定时器通过setTimeout和setInterval实现，前者延迟执行一次，后者周期性重复执行，均返回ID供clearTimeout或clearInterval清除，常用于倒计时、轮播图等场景，需注意及时清理避免内存泄漏。

JavaScript定时器是控制代码在指定时间后或每隔一段时间重复执行的重要工具。主要通过 setTimeout 和 setInterval 两个函数实现，它们都属于浏览器的 Web API，不是 JavaScript 语言本身提供的功能。

setTimeout：延迟执行一次

setTimeout 用于在指定毫秒数后执行一段代码，只执行一次。

setTimeout(function, delay, param1, param2, ...)

• function：要执行的函数
• delay：延迟时间（毫秒）
• param1, param2...：传递给函数的参数

示例1：延迟3秒后弹出提示

setTimeout(() => {
  alert("3秒到了！");
}, 3000);

示例2：传参使用

function sayHello(name) {
  console.log("你好，" + name);
}
setTimeout(sayHello, 1000, "小明"); // 1秒后输出：你好，小明

setInterval：周期性重复执行

setInterval 每隔指定时间就执行一次函数，直到被清除。

setInterval(function, interval, param1, param2, ...)

• function：要重复执行的函数
• interval：执行间隔（毫秒）
• 参数部分同 setTimeout

示例：每2秒打印一次时间

const timer = setInterval(() => {
  console.log(new Date().toLocaleTimeString());
}, 2000);

清除定时器：clearTimeout 与 clearInterval

每次调用 setTimeout 或 setInterval 都会返回一个定时器ID，可用于取消定时任务。

• clearTimeout(id)：清除由 setTimeout 设置的定时器
• clearInterval(id)：清除由 setInterval 设置的定时器

示例：5秒后停止重复打印

const intervalId = setInterval(() => {
  console.log("正在运行...");
}, 1000);

// 5秒后清除
setTimeout(() => {
  clearInterval(intervalId);
  console.log("定时器已停止");
}, 5000);

常见应用场景：

• 页面倒计时（如抢购、验证码重发）
• 轮播图自动切换
• 实时更新时间显示
• 防抖/节流中的延时控制
• 模拟异步加载效果

注意事项：

• 延迟时间最小为0，但实际执行可能受浏览器最小延迟限制（通常4ms左右）
• 定时器不保证精确时间，只能保证“至少等待这么久”
• 避免在循环中创建大量未清除的定时器，会造成内存泄漏
• 在组件销毁时（如Vue、React）记得清理定时器

基本上就这些。掌握 setTimeout 和 setInterval 的基本用法和清除机制，就能应对大多数需要时间控制的场景。关键是记得及时清理不需要的定时器，避免副作用。