0

0

javascript定时器有哪些_如何使用setTimeout延迟执行代码?

夢幻星辰

夢幻星辰

发布时间:2026-01-07 19:55:02

|

578人浏览过

|

来源于php中文网

原创

settimeout 是 javascript 中用于延迟执行一次回调的异步机制,不保证精确延时,因其实际执行依赖主线程空闲、事件循环状态及浏览器节流策略。

javascript定时器有哪些_如何使用settimeout延迟执行代码?

setTimeout 是什么,为什么它不保证精确延时?

setTimeout 是 JavaScript 中最基础的异步定时机制,用于在指定毫秒数后执行一次回调函数。但它不是“准时钟”,而是“尽最大努力按时触发”——实际执行时间取决于当前调用是否为空、事件循环是否空闲、以及是否有更高优先级任务(比如渲染、用户输入)正在排队。

常见误解是以为 setTimeout(fn, 1000) 一定在 1000ms 后立刻执行;实际上它只保证「至少等待 1000ms」,之后等主线程空闲才真正调用。

  • 如果主线程正执行一个耗时 2s 的 while 循环,即使设了 setTimeout(..., 100),回调也要等到循环结束才执行
  • 浏览器对嵌套过深或频繁创建的 setTimeout 可能做节流(如最小间隔限制为 4ms)
  • 页面被切换到后台时,大多数浏览器会将 setTimeout 的最小间隔拉长至 1000ms 左右,以节省资源

如何正确使用 setTimeout 延迟执行代码?

核心是把要延迟执行的逻辑封装成函数,并传给 setTimeout,同时注意 this 绑定、参数传递和清理需求。

  • 不要写 setTimeout(fn(), 1000) —— 这会立即执行 fn(),把返回值当回调传入;应写 setTimeout(fn, 1000)setTimeout(() => fn(), 1000)
  • 需要传参时,推荐用箭头函数包裹,避免 setTimeout(fn, 1000, arg1, arg2) 在旧版 Safari 中不兼容
  • 如果该定时器可能被重复设置(比如按钮连点),记得先用 clearTimeout 清掉前一个,否则会累积多个待执行回调
let timerId = null;
function delayedSave(data) {
  clearTimeout(timerId); // 防重复触发
  timerId = setTimeout(() => {
    console.log('saving:', data);
    // 实际保存逻辑
  }, 500);
}

setTimeout 和 setInterval 有什么关键区别?

setTimeout 只执行一次,setInterval 按固定间隔重复执行——但它们底层都依赖事件循环,且都受主线程阻塞影响。

Decktopus AI
Decktopus AI

AI在线生成高质量演示文稿

下载

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

  • setInterval 不会跳过“丢失”的周期:如果某次回调执行耗时超过设定间隔(比如 setInterval(fn, 100),但 fn 耗时 150ms),下一次回调会在上一次结束后立刻开始,不会补上“欠的那 50ms”
  • 想实现“严格按间隔执行”,得用 setTimeout 递归调用,自己控制下次触发时间点
  • setInterval 更难清理:必须显式保存返回的 id 并调用 clearInterval(id),漏掉就会内存泄漏
let intervalId = setInterval(() => {
  console.log('tick');
}, 1000);

// ✅ 正确清理
clearInterval(intervalId);

什么时候不该用 setTimeout 做延迟?

当延迟目的不是“等一段时间”,而是“等某个条件成立”或“等某个操作完成”,setTimeout 就容易出错或不可靠。

  • 等 DOM 元素挂载完成?用 requestAnimationFrameMutationObserver,而不是 setTimeout(..., 0)
  • 等 Promise 结果?直接 await.then(),别用 setTimeout 硬等
  • 做防抖/节流?用专门的逻辑控制,而不是靠 setTimeout + 全局变量拼凑,易出竞态
  • 需要高精度计时(如音频同步、游戏帧逻辑)?浏览器 API 本身就不适合,应考虑 performance.now() 配合 requestAnimationFrame

真正需要延迟的场景其实很窄:UI 提示自动关闭、简单轮询兜底、模拟异步响应——其余多数情况,都有更语义明确、更可控的替代方案。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
while的用法
while的用法

while的用法是“while 条件: 代码块”,条件是一个表达式,当条件为真时,执行代码块,然后再次判断条件是否为真,如果为真则继续执行代码块,直到条件为假为止。本专题为大家提供while相关的文章、下载、课程内容,供大家免费下载体验。

104

2023.09.25

全局变量怎么定义
全局变量怎么定义

本专题整合了全局变量相关内容,阅读专题下面的文章了解更多详细内容。

87

2025.09.18

python 全局变量
python 全局变量

本专题整合了python中全局变量定义相关教程,阅读专题下面的文章了解更多详细内容。

104

2025.09.18

堆和栈的区别
堆和栈的区别

堆和栈的区别:1、内存分配方式不同;2、大小不同;3、数据访问方式不同;4、数据的生命周期。本专题为大家提供堆和栈的区别的相关的文章、下载、课程内容,供大家免费下载体验。

432

2023.07.18

堆和栈区别
堆和栈区别

堆(Heap)和栈(Stack)是计算机中两种常见的内存分配机制。它们在内存管理的方式、分配方式以及使用场景上有很大的区别。本文将详细介绍堆和栈的特点、区别以及各自的使用场景。php中文网给大家带来了相关的教程以及文章欢迎大家前来学习阅读。

600

2023.08.10

线程和进程的区别
线程和进程的区别

线程和进程的区别:线程是进程的一部分,用于实现并发和并行操作,而线程共享进程的资源,通信更方便快捷,切换开销较小。本专题为大家提供线程和进程区别相关的各种文章、以及下载和课程。

723

2023.08.10

线程和进程的区别
线程和进程的区别

线程和进程的区别:线程是进程的一部分,用于实现并发和并行操作,而线程共享进程的资源,通信更方便快捷,切换开销较小。本专题为大家提供线程和进程区别相关的各种文章、以及下载和课程。

723

2023.08.10

DOM是什么意思
DOM是什么意思

dom的英文全称是documentobjectmodel,表示文件对象模型,是w3c组织推荐的处理可扩展置标语言的标准编程接口;dom是html文档的内存中对象表示,它提供了使用javascript与网页交互的方式。想了解更多的相关内容,可以阅读本专题下面的文章。

4138

2024.08.14

Swift iOS架构设计与MVVM模式实战
Swift iOS架构设计与MVVM模式实战

本专题聚焦 Swift 在 iOS 应用架构设计中的实践,系统讲解 MVVM 模式的核心思想、数据绑定机制、模块拆分策略以及组件化开发方法。内容涵盖网络层封装、状态管理、依赖注入与性能优化技巧。通过完整项目案例,帮助开发者构建结构清晰、可维护性强的 iOS 应用架构体系。

3

2026.03.03

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 5.7万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.2万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

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