JavaScript 定时器 setInterval 与 clearInterval 使用详解
作者:青柠时间:2026-10-31 08:08:47浏览:346
本文详细介绍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的使用方法及清除多个定时任务的技巧已介绍完毕。如需了解更多相关内容,建议查阅本站过往文章或继续浏览后续章节。感谢支持!
作者最新文章
ES6模块化中js文件怎么用import和export交互
2026-11-05 17:00:48
JS读取本地文件时报错或无响应的常见原因
2026-11-05 16:32:31
let、const与var的区别:JavaScript变量声明最佳实践
2026-11-05 14:16:38
JS中直接定义静态二维数组的字面量写法
2026-11-05 14:16:08
JS 怎么查找字符串中所有匹配项的位置
2026-11-05 14:15:53
