大家好，我是江城开朗的豌豆，一名拥有6年以上前端开发经验的工程师。我精通HTML、CSS、JavaScript等基础前端技术，并深入掌握Vue、React、Uniapp、Flutter等主流框架，能够高效解决各类前端开发问题。在我的技术栈中，除了常见的前端开发技术，我还擅长3D开发，熟练使用Three.js进行3D图形绘制，并在虚拟现实与数字孪生技术上积累了丰富的经验，特别是在虚幻引擎开发方面，有着深入的理解和实践。
我一直认为技术的不断探索和实践是进步的源泉，近年来，我深入研究大数据算法的应用与发展，尤其在数据可视化和交互体验方面，取得了显著的成果。我也注重与团队的合作，能够有效地推动项目的进展和优化开发流程。现在，我担任全栈工程师，拥有CSDN博客专家认证及阿里云专家博主称号，希望通过分享我的技术心得与经验，帮助更多人提升自己的技术水平，成为更优秀的开发者。
技术qq交流群：906392632
大家好，我是小杨，一个干了快6年的前端老司机。今天要和大家分享一个特别实用的定时器技巧------用setTimeout实现setInterval。这个方案不仅能解决setInterval的一些痛点，还能让我们的定时任务更加可控。
一、为什么不用setInterval？
先说说我为什么研究这个方案。去年在做一个大屏数据实时刷新功能时，发现直接用setInterval会有个恶心的问题：
javascript
setInterval(() => {
// 模拟网络请求
console.log('执行任务', new Date().getSeconds());
}, 1000);看起来每1秒执行一次对吧？但如果网络卡顿导致函数执行超过1秒呢？这时候就会发现多个任务挤在一起执行，就像早高峰的地铁一样让人崩溃。
二、setTimeout的救场方案
后来我改用setTimeout递归调用的方式，完美解决了这个问题：
javascript
function 我的循环任务() {
console.log('执行任务', new Date().getSeconds());
// 在函数末尾重新调用自己
setTimeout(我的循环任务, 1000);
}
// 启动任务
setTimeout(我的循环任务, 1000);这个方案的精妙之处在于：每次都是等上次任务完全执行完，才重新计时。就像排队上厕所，必须等前一个人出来，下个人才能进去。
三、升级版：可控定时器
后来我又做了个加强版，加上了启动/停止功能：
javascript
let timer = null;
let count = 0;
function 我的可中断任务() {
console.log(`执行第${++count}次`, new Date().getSeconds());
if(count < 5) { // 只执行5次
timer = setTimeout(我的可中断任务, 1000);
}
}
// 启动
timer = setTimeout(我的可中断任务, 1000);
// 随时可以停止
// clearTimeout(timer);这样写有三个好处：
- 避免任务堆积
- 可以精确控制执行次数
- 随时能终止任务
四、实战中的应用场景
这个技巧在我工作中帮了大忙，比如：
- 轮询接口：检查订单状态，直到支付成功
- 动画序列：实现复杂的多段动画效果
- 倒计时：更精准的秒表功能
javascript
// 倒计时示例
function 倒计时(剩余秒数) {
console.log(`剩余：${剩余秒数}秒`);
if(剩余秒数 > 0) {
setTimeout(() => 倒计时(剩余秒数 - 1), 1000);
}
}
倒计时(10); // 开始10秒倒计时五、注意事项
虽然这个方案很香，但也要注意：
- 记得保存timer变量，否则没法清除
- 递归调用要注意停止条件，避免内存泄漏
- 长时间运行的任务可能会造成调用栈过深
六、总结
setTimeout实现setInterval的方案，就像是用乐高积木拼出了现成玩具的功能，虽然多写几行代码，但获得了更大的灵活性和可控性。特别适合需要精确控制执行时机的场景。
大家如果有更好的实现方案，欢迎在评论区交流～如果觉得有用，别忘了点赞收藏！