setInterval是JavaScript内置的定时器函数，核心作用是在设定的固定时间间隔后，重复执行指定的函数或代码段，直到被手动清除或者页面被卸载。它和setTimeout的最大区别在于，setTimeout只会执行一次目标逻辑，而setInterval会按照间隔持续循环执行，非常适合需要周期性触发的需求。
setInterval的基础语法
setInterval的基本调用格式如下，它会返回一个唯一的定时器ID，后续可以用这个ID来清除定时器：
// 基础语法 let timerId = setInterval(callback, interval, param1, param2, ...); // 参数说明 // callback：要重复执行的函数，也可以是字符串形式的代码，不过不推荐使用字符串形式 // interval：时间间隔，单位是毫秒，1秒等于1000毫秒 // param1, param2...：可选参数，会作为参数传递给callback函数 // 返回值timerId：定时器的唯一标识，用于后续清除定时器
用setInterval实现简单定时任务
最常见的定时任务场景是每隔一段时间执行一次特定逻辑，比如每隔2秒在控制台输出一次当前时间，实现代码如下：
// 定义要执行的定时任务函数
function printCurrentTime() {
let now = new Date();
let timeStr = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();
console.log('当前时间：' + timeStr);
}
// 设置每隔2000毫秒（2秒）执行一次printCurrentTime函数
let timer = setInterval(printCurrentTime, 2000);
// 如果需要清除定时器，可以调用clearInterval并传入定时器ID
// 比如10秒后停止这个定时任务
setTimeout(() => {
clearInterval(timer);
console.log('定时任务已停止');
}, 10000);
带参数的定时任务实现
如果定时任务需要接收参数，可以直接在setInterval的调用中传入参数，示例如下：
// 带参数的定时任务函数
function countDown(startNum, step) {
console.log('当前剩余数值：' + startNum);
startNum = startNum - step;
// 当数值小于等于0时清除定时器
if (startNum <= 0) {
clearInterval(timer2);
console.log('倒计时结束');
}
return startNum;
}
// 初始数值为10，每次减少2，每隔1秒执行一次
let currentNum = 10;
let timer2 = setInterval(() => {
currentNum = countDown(currentNum, 2);
}, 1000);
setInterval使用注意事项
- 时间间隔的最小精度受浏览器和系统限制，通常实际间隔会比设置的间隔略长，不适合对时间精度要求极高的场景。
- 如果定时任务的函数执行时间超过了设定的间隔，那么下一次执行会等到当前函数执行完成后立即触发，不会严格按照间隔排队。
- 页面切换到后台或者最小化时，大部分浏览器会降低setInterval的执行频率，甚至暂停执行，需要高精度定时可以考虑使用Web Worker配合时间戳计算。
- 一定要在不需要定时器的时候调用
clearInterval清除定时器，避免内存泄漏，尤其是单页应用切换页面时，要记得销毁之前创建的定时器。
常见应用场景举例
setInterval在实际开发中有很多实用场景，比如：
- 数据轮询：每隔一段时间请求一次接口，获取最新的数据更新页面，比如股票行情、消息通知列表。
- 动画更新：每隔16毫秒左右执行一次样式更新，实现流畅的页面动画效果，不过复杂动画更推荐用requestAnimationFrame。
- 定时提醒：每隔一段时间检查用户是否有未读消息，或者提醒用户保存编辑的内容。
注意：如果定时任务只需要执行一次，优先选择setTimeout，避免不必要的循环执行消耗资源。如果需要动态调整执行间隔，也可以每次执行完后用setTimeout递归调用，比setInterval更灵活。
setIntervalJavaScript定时任务前端开发修改时间：2026-07-03 06:39:20