首页 > web前端 > js教程 > 正文

JavaScript定时器有哪些_setTimeout和setInterval有何不同?

夢幻星辰
发布: 2025-12-16 13:54:08
原创
876人浏览过
JavaScript中最常用定时器是setTimeout和setInterval:前者延后执行一次,需clearTimeout取消;后者按间隔重复执行,需clearInterval清除;任务耗时波动大时推荐用setTimeout递归实现稳定间隔。

javascript定时器有哪些_settimeout和setinterval有何不同?

JavaScript里最常用的定时器就两个:setTimeoutsetInterval。核心区别很简单:一个只跑一次,一个反复跑。

setTimeout 是“延后执行一次”

它在指定毫秒数之后,调用函数或执行代码,仅此一次。适合做延迟触发类操作。

  • 比如用户输入停顿 300ms 后再发起搜索(防抖)
  • 比如弹出提示框 2 秒后自动消失
  • 比如模拟接口响应延迟:setTimeout(() => console.log('数据到了'), 1500)
  • 必须用 clearTimeout 来取消,否则它自己执行完就结束,不占资源

setInterval 是“每隔固定时间重复执行”

它会按设定间隔不断调用函数,直到你主动调用 clearInterval 或页面卸载。

  • 比如每 5 秒拉一次服务器最新数据
  • 比如实现倒计时、秒表、轮播图切换
  • 注意:如果任务执行时间 > 设定间隔,后续调用不会被跳过,可能堆积——例如设了 1000ms 但每次执行要 1200ms,就会出现“连发”现象
  • 必须用 clearInterval 清除,漏掉会导致内存泄漏或意外持续运行

想稳定重复执行?推荐 setTimeout 递归写法

setInterval 在任务耗时波动大时容易节奏不准。更可控的做法是用 setTimeout 自调用:

AletheaAI
AletheaAI

世界上第一个从自然语言描述中生成交互式 AI 角色的多模态 AI 系统。

AletheaAI 83
查看详情 AletheaAI

立即学习Java免费学习笔记(深入)”;

  • 每次任务执行完,再设下一次定时:“做完再等,不抢时间”
  • 示例:function tick() { console.log('执行'); setTimeout(tick, 1000); } tick();
  • 这样能保证两次执行之间严格间隔 1000ms,不受任务本身耗时影响

清除定时器必须配对使用

返回的 ID 只能用对应的清除方法:

  • setTimeout 返回的 ID → 只能用 clearTimeout
  • setInterval 返回的 ID → 只能用 clearInterval
  • 混用无效,比如用 clearTimeout 去清 setInterval 的 ID,什么也不会发生

基本上就这些。选哪个,关键看你要“只干一回”还是“一直干下去”。

以上就是JavaScript定时器有哪些_setTimeout和setInterval有何不同?的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号