js实现定时
定时器基础实现
JavaScript 提供了两种主要的定时器方法：setTimeout 和 setInterval。setTimeout 用于在指定的时间后执行一次代码，而 setInterval 用于每隔指定的时间重复执行代码。
// setTimeout 示例：延迟 2 秒后执行
setTimeout(() => {
console.log('延时 2 秒执行');
}, 2000);
// setInterval 示例：每隔 1 秒执行一次
const intervalId = setInterval(() => {
console.log('每隔 1 秒执行');
}, 1000);
// 清除定时器
clearInterval(intervalId);定时器的清除
为了避免内存泄漏或意外的重复执行，定时器需要被正确清除。setTimeout 返回一个定时器 ID，可以通过 clearTimeout 取消；setInterval 返回的 ID 则通过 clearInterval 取消。
const timeoutId = setTimeout(() => {
console.log('这段代码不会执行');
}, 2000);
clearTimeout(timeoutId);高级定时控制
使用递归的 setTimeout 可以替代 setInterval，实现更精确的定时控制。这种方式可以确保前一次执行完成后再开始下一次定时。
function repeatTask() {
console.log('递归定时任务');
setTimeout(repeatTask, 1000);
}
repeatTask();定时器与异步结合
定时器常用于异步任务调度，例如延迟加载数据或实现轮询机制。以下是一个轮询 API 的示例：
function pollAPI() {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
console.log(data);
setTimeout(pollAPI, 5000); // 5 秒后再次轮询
})
.catch(error => {
console.error('轮询失败:', error);
setTimeout(pollAPI, 10000); // 失败后 10 秒重试
});
}
pollAPI();性能优化注意事项
避免在短时间内创建大量定时器，可能导致性能问题。可以使用防抖（debounce）或节流（throttle）技术优化高频触发的定时任务。
function debounce(func, delay) {
let timeoutId;
return function() {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => func.apply(this, arguments), delay);
};
}
const debouncedLog = debounce(() => console.log('防抖后的输出'), 300);
window.addEventListener('resize', debouncedLog);定时器的替代方案
现代浏览器提供了 requestAnimationFrame，适合动画等需要与屏幕刷新率同步的场景。其执行频率通常为 60 FPS（约 16.7ms/帧）。
function animate() {
console.log('动画帧');
requestAnimationFrame(animate);
}
animate();
