本文详细介绍JavaScript中setInterval和clearInterval的使用方法。通过示例展示如何设置固定间隔执行函数，并重点讲解利用箭头函数解决this指向问题。此外，还提供了一个在for循环中批量清除多个定时任务的实用技巧，帮助开发者有效管理前端异步任务。
定时器机制允许开发者以固定的时间间隔重复调用指定函数。
官方文档参考
- https://developer.mozilla.org/zh-CN/docs/Web/API/setInterval
常用语法规范
// 设置定时器
var intervalID = setInterval(function[, delay]);
// 清除定时器
clearInterval(intervalID)
为防止this指向错误，通常推荐使用箭头函数来定义回调。
// 总的执行5次
let total = 5;
// 每5秒执行一次
let delay = 1000 * 5;
// 执行计数
let count = 0;
function task() {
count++;
console.log(new Date().toLocaleString());
// 执行5次后清除定时器
if (count >= total) {
clearInterval(intervalID);
}
}
// 每5秒执行一次
let intervalID = setInterval(() => {
task();
}, delay);
运行结果示例
2023/2/3 17:00:29 2023/2/3 17:00:34 2023/2/3 17:00:39 2023/2/3 17:00:44 2023/2/3 17:00:49
补充：批量清除多个定时任务的方法
在for循环中，若遍历次数小于定时任务ID的最大值，则保留最后一个执行中的任务；若遍历次数小于等于最大值，则可实现全部清除。
var end = setInterval(function(){}, 100);
var start = (end - 100) > 0 ? end -100 : 0;
for(var i = start; i < end; i++)
{
clearInterval(i);
}总结
至此，关于JavaScript中setInterval和clearInterval的使用方法及清除多个定时任务的技巧已介绍完毕。如需了解更多相关内容，建议查阅本站过往文章或继续浏览后续章节。感谢支持！