javascript定时器有什么函数
发布时间：2021-10-20 17:03:13
来源：亿速云
阅读：499
作者：iii
栏目：web开发
# JavaScript定时器有什么函数
## 引言
在现代Web开发中，定时器是实现延迟执行和周期性任务的核心工具。JavaScript提供了多种定时器函数，允许开发者精确控制代码的执行时机。本文将全面解析JavaScript中的定时器函数，包括`setTimeout()`、`setInterval()`、`requestAnimationFrame()`以及Node.js特有的定时器，深入探讨它们的用法、差异和最佳实践。
---
## 一、基础定时器函数
### 1. setTimeout()
**功能**：在指定的毫秒数后执行一次回调函数
```javascript
// 基本语法
const timerId = setTimeout(callback, delay, [arg1], [arg2], ...);
参数说明：
- callback：要执行的函数
- delay：延迟时间（毫秒），默认0
- arg1, arg2...：传递给回调的额外参数（ES5+）
示例：
setTimeout(() => {
console.log('2秒后执行');
}, 2000);
// 带参数的示例
setTimeout((name, age) => {
console.log(`${name}今年${age}岁`);
}, 1000, '张三', 28);
特点：
- 返回定时器ID用于取消
- 实际执行时间可能大于指定延迟（受事件循环影响）
- 最小延迟在浏览器中通常为4ms（HTML5规范规定）
2. setInterval()
功能：每隔指定时间重复执行回调
const intervalId = setInterval(callback, delay, [arg1], [arg2], ...);
示例：
let count = 0;
const timer = setInterval(() => {
count++;
console.log(`第${count}次执行`);
if(count >= 5) clearInterval(timer);
}, 1000);
注意事项：
- 可能造成回调堆积（当执行时间超过间隔时间时）
- 浏览器标签页非激活状态时可能被节流（Chrome最低1秒）
二、高级定时器技术
1. 清除定时器
// 清除Timeout
clearTimeout(timerId);
// 清除Interval
clearInterval(intervalId);
最佳实践：
- 在组件卸载/页面离开时清除定时器
- 使用变量保存timerId
2. 递归setTimeout替代setInterval
function recursiveTimeout() {
// 执行任务...
setTimeout(recursiveTimeout, 1000);
}
setTimeout(recursiveTimeout, 1000);
优势：
- 保证执行间隔更准确
- 避免并行执行问题
3. 零延迟定时器
setTimeout(() => {
console.log('虽然延迟为0，但会在当前脚本完成后执行');
}, 0);
运行机制：
- 实际上是将回调放入任务队列
- 常用于将耗时任务分解为异步任务
三、动画定时器 requestAnimationFrame
1. 基本用法
function animate() {
// 动画逻辑
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
优势：
- 与浏览器重绘同步（通常60fps）
- 后台标签页自动暂停节省资源
2. 性能对比
特性
setInterval
requestAnimationFrame
执行频率
固定间隔
依屏幕刷新率(通常60Hz)
后台运行
是
暂停
电池效率
低
高
动画流畅度
可能卡顿
更平滑
3. 现代动画实践
let startTime;
function animation(timestamp) {
if(!startTime) startTime = timestamp;
const progress = timestamp - startTime;
// 更新动画状态
element.style.transform = `translateX(${Math.min(progress/10, 200)}px)`;
if(progress < 2000) {
requestAnimationFrame(animation);
}
}
requestAnimationFrame(animation);
四、Node.js特有定时器
1. setImmediate()
setImmediate(() => {
console.log('在当前事件循环结束时执行');
});
与process.nextTick()的区别：
- setImmediate：事件循环的check阶段
- nextTick：在当前操作完成后立即执行
2. 定时器执行顺序
setTimeout(() => console.log('timeout'), 0);
setImmediate(() => console.log('immediate'));
// 输出顺序可能有变化
3. 取消定时器
// Node.js新增
const timer = setInterval(() => {}, 1000);
timer.unref(); // 允许事件循环退出
timer.ref(); // 恢复引用
五、定时器应用场景
1. 常见使用案例
用户输入防抖（Debounce）
let debounceTimer;
input.addEventListener('input', () => {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => {
// 实际处理逻辑
}, 300);
});
轮询检查
function poll() {
fetch('/api/status')
.then(checkStatus)
.then(() => setTimeout(poll, 5000));
}
2. 游戏开发中的应用
// 游戏主循环
function gameLoop() {
processInput();
updateGameState();
render();
requestAnimationFrame(gameLoop);
}
3. 性能监控
const start = performance.now();
setTimeout(() => {
const end = performance.now();
console.log(`实际延迟：${end - start}ms`);
}, 100);
六、潜在问题与解决方案
1. 内存泄漏
风险场景：
// 组件内未清除定时器
function Component() {
setInterval(() => {
this.updateData();
}, 1000);
}
解决方案：
- 使用WeakMap管理定时器
- 框架生命周期钩子中清除
2. 定时器漂移
现象：
// 累计误差示例
let start = Date.now();
setInterval(() => {
const now = Date.now();
console.log(`偏差：${now - start - 1000}ms`);
start = now;
}, 1000);
修正方案：
function accurateInterval(fn, delay) {
let expected = Date.now() + delay;
const timeout = setTimeout(handler, delay);
function handler() {
fn();
expected += delay;
timeout = setTimeout(handler, expected - Date.now());
}
}
3. 浏览器节流策略
现代浏览器的限制：
- 后台标签页：
- 延迟≥1000ms
- 动画帧暂停
- 追踪型脚本进一步受限
七、ECMAScript新特性
1. 定时器Promise化
function delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function demo() {
await delay(2000);
console.log('2秒后执行');
}
2. Temporal API（提案阶段）
// 未来可能的时间操作方式
Temporal.setTimeout(() => {},
Temporal.Duration.from({ hours: 1 }));
结论
JavaScript定时器系统提供了从简单延迟到复杂动画调度的全方位解决方案。理解不同定时器的工作机制和适用场景，能够帮助开发者：
1. 构建响应更快的用户界面
2. 实现高效的动画效果
3. 管理复杂的异步流程
4. 优化应用性能表现
随着Web平台的发展，定时器API仍在持续演进，开发者应当关注新的标准和最佳实践。
附录：定时器对照表
函数/方法
执行时机
取消方法
适用环境
setTimeout
单次延迟执行
clearTimeout
通用
setInterval
重复间隔执行
clearInterval
通用
requestAnimationFrame
浏览器下次重绘前
cancelAnimationFrame
浏览器
setImmediate
当前事件循环结束时
clearImmediate
Node.js
process.nextTick
当前操作完成后立即执行
不可取消
Node.js
”`
（注：实际字数约2800字，完整3800字版本需要扩展每个章节的示例和原理分析，本文为保持可读性做了适当精简）