setTimeout用于延迟一次执行,setInterval用于重复执行,二者均需用clearTimeout/clearInterval及时清理;最小延迟约4ms,传参推荐用后续参数或箭头函数,页面失焦时可能被节流。

JavaScript 通过 setTimeout 和 setInterval 实现延迟执行和定时器功能,它们都属于浏览器或 Node.js 环境的全局 API,用法简单但细节需要注意。
setTimeout:执行一次延迟任务
用于在指定毫秒数后执行一次函数。它返回一个唯一的定时器 ID,可用于后续取消。
- 基本语法:
setTimeout(callback, delay, ...args) -
delay单位是毫秒(如 1000 = 1 秒),最小值通常为 4ms(受浏览器限制) - 如果想传参给回调函数,推荐直接写成箭头函数或使用第三个及之后的参数(更安全)
示例:
setTimeout(() => console.log('3秒后执行'), 3000);setTimeout(console.log, 2000, '带参数的调用');
setInterval:重复执行定时任务
按固定间隔反复调用函数,适合轮询、倒计时、心跳检测等场景。
立即学习“Java免费学习笔记(深入)”;
- 语法与
setTimeout类似:setInterval(callback, interval, ...args) - 必须手动用
clearInterval(id)停止,否则会持续运行,可能造成内存泄漏或性能问题 - 注意:若回调执行时间超过设定间隔,下一次调用会“排队等待”,不会并行执行
示例:
const timer = setInterval(() => console.log('每2秒打印一次'), 2000);clearInterval(timer); // 后续某处调用以停止
清除定时器:避免意外持续运行
无论是 setTimeout 还是 setInterval,只要不再需要,就该及时清理。
-
clearTimeout(id)和clearInterval(id)接收对应的定时器 ID - 清除已触发或已清除的定时器不会报错,可安全调用多次
- 在组件卸载(如 React 的 useEffect cleanup)、页面离开或条件满足时主动清理
替代方案:Promise + setTimeout 封装更现代的延迟
如果希望用 await 控制异步延迟,可以封装一个返回 Promise 的函数:
async function example() { await delay(1000); console.log('1秒后执行'); }
基本上就这些。核心是理解两个 API 的行为差异、及时清理、注意执行时机的不确定性(比如页面失焦时定时器可能被节流)。不复杂但容易忽略细节。










