当前位置： 首页 > news >正文

如何在 JavaScript 中设置定时器？

news 2026/5/15 23:11:18

在 JavaScript 中，设置定时器通常使用两个内置的函数：setTimeout() 和 setInterval()。它们允许你在指定的时间延迟后执行某个函数或者以某个间隔反复执行某个函数。下面，我将结合实际项目代码示例讲解如何使用它们。

1. setTimeout() — 延迟执行一次函数

setTimeout() 用来在指定的延迟时间后执行一个函数。它只会执行一次。

语法：
setTimeout(callback, delay, ...args);
  • callback: 要执行的函数。
  • delay: 延迟时间，以毫秒为单位（1000 毫秒 = 1 秒）。
  • args: 可选参数，在执行回调函数时传递给它。
示例 1：简单的 setTimeout 示例

假设你有一个按钮，点击按钮后会延迟 2 秒显示一条消息。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>setTimeout Example</title>
</head>
<body><button id="clickButton">点击我</button><p id="message" style="display: none;">这是延迟消息</p><script>const button = document.getElementById('clickButton');const message = document.getElementById('message');button.addEventListener('click', function() {// 延迟 2 秒后显示消息setTimeout(function() {message.style.display = 'block';}, 2000); // 2000 毫秒 = 2 秒});</script>
</body>
</html>

工作原理：

  • 用户点击按钮时，触发 click 事件。
  • setTimeout() 延迟 2 秒后执行一个匿名函数，显示消息。

2. setInterval() — 定时重复执行函数

setInterval() 用来以指定的时间间隔反复执行某个函数。

语法：
setInterval(callback, interval, ...args);
  • callback: 要执行的函数。
  • interval: 时间间隔，以毫秒为单位。
  • args: 可选参数，传递给回调函数。
示例 2：简单的 setInterval 示例

假设你正在开发一个倒计时器，定时更新页面上的时间。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>setInterval Example</title>
</head>
<body><div id="timer">10</div><script>let countdown = 10;const timerElement = document.getElementById('timer');const intervalId = setInterval(function() {countdown -= 1;timerElement.textContent = countdown;// 当倒计时结束时清除定时器if (countdown <= 0) {clearInterval(intervalId);alert('时间到！');}}, 1000); // 每秒钟更新一次</script>
</body>
</html>

工作原理：

  • setInterval() 每隔 1 秒（1000 毫秒）执行一次回调函数。
  • 回调函数会更新页面上的倒计时，并在倒计时结束时使用 clearInterval() 清除定时器，防止定时器继续执行。

3. 在实际项目中的应用示例

示例 3：处理用户输入的防抖（Debounce）和节流（Throttle）

定时器在前端开发中非常重要，尤其是在处理用户输入时。两种常见的技术是防抖和节流。

  • 防抖（Debounce）：在用户停止输入一段时间后才执行操作。
  • 节流（Throttle）：限制函数在单位时间内只能执行一次。
防抖示例

假设你正在开发一个搜索框，希望用户输入时在停止输入 500 毫秒后才发起请求。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Debounce Example</title>
</head>
<body><input type="text" id="searchInput" placeholder="请输入搜索内容"><script>let timeoutId;const searchInput = document.getElementById('searchInput');searchInput.addEventListener('input', function(event) {// 每次输入时清除之前的定时器，重新设置新的定时器clearTimeout(timeoutId);timeoutId = setTimeout(function() {console.log('执行搜索操作:', event.target.value);}, 500); // 500 毫秒后执行搜索});</script>
</body>
</html>

工作原理：

  • 每次用户输入时，都会清除上一次的定时器（clearTimeout(timeoutId)），然后重新启动一个新的定时器。
  • 如果用户在 500 毫秒内停止输入，才会触发搜索操作。
节流示例

假设你在开发一个页面滚动事件处理器，但你希望限制滚动事件的处理频率，以避免频繁的回调造成性能问题。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Throttle Example</title>
</head>
<body><div style="height: 2000px;">滚动页面查看效果</div><script>let lastTime = 0;function handleScroll() {const now = new Date().getTime();// 每 200 毫秒触发一次滚动事件if (now - lastTime >= 200) {lastTime = now;console.log('页面滚动了！');}}window.addEventListener('scroll', handleScroll);</script>
</body>
</html>

工作原理：

  • 每次滚动事件触发时，handleScroll 函数会检查是否距离上次触发已经超过 200 毫秒。
  • 如果满足条件，则执行回调，并更新上次执行的时间。这样可以确保滚动事件不会过于频繁地触发。

4. 清除定时器

使用 clearTimeout() 或 clearInterval() 可以清除已经设置的定时器。

  • clearTimeout() 用来清除由 setTimeout() 设置的定时器。
  • clearInterval() 用来清除由 setInterval() 设置的定时器。
示例 4：清除定时器
const timeoutId = setTimeout(function() {console.log('这个不会执行');
}, 1000);clearTimeout(timeoutId); // 取消定时器

总结

  • setTimeout() 用于延迟执行一次性操作。
  • setInterval() 用于定时执行重复的操作。
  • 在实际项目中，定时器可以帮助我们实现防抖、节流等优化技术，提升应用性能。
  • 清除定时器非常重要，尤其是在动态页面中，避免内存泄漏或不必要的操作。

通过这些定时器的使用，我们可以优化用户体验、提高应用的性能，尤其是在处理复杂交互和高频操作时。

相关文章：

如何在 JavaScript 中设置定时器？

在 JavaScript 中&#xff0c;设置定时器通常使用两个内置的函数&#xff1a;setTimeout() 和 setInterval()。它们允许你在指定的时间延迟后执行某个函数或者以某个间隔反复执行某个函数。下面&#xff0c;我将结合实际项目代码示例讲解如何使用它们。 1. setTimeout() — 延…...

编程日记 2024/12/10 10:52:34

【学习路线】Java

Java基础 基础 基础语法 面向对象 集合框架 JCF 进阶 并发编程 JVM 企业级开发 框架 Spring Boot Spring Cloud 分布式 高性能 高可用 安全 基建 Docker 实战 数据库 MySQL Redis 计算机基础 计算机组成原理 操作系统 计算机网络 数据结构与算法 设计模式 参考&#xff1a;…...

编程日记 2024/12/10 10:51:33

[GYCTF2020]Easyphp

[GYCTF2020]Easyphp 知识点 反序列化 、字符逃逸 解题 审代码 <?php error_reporting(0); session_start(); function safe($parm){$array array(union,regexp,load,into,flag,file,insert,"",\\,"*","alter");return str_replace($arr…...

编程日记 2024/12/10 10:49:30

JavaScript 数组的高级用法与最佳实践

在前端开发中&#xff0c;JavaScript 数组是不可或缺的工具。它们不仅用于存储数据&#xff0c;还提供了丰富的方法来操作和处理这些数据。掌握 JavaScript 数组的高级用法和最佳实践对于编写高效、可维护的代码至关重要。本文将深入探讨 JavaScript 数组的高级用法&#xff0c…...

编程日记 2024/12/10 10:48:27

通信协议 http、tcp、udp

目录 1. 五层网络协议 2. http 3. tcp、udp 4. tcp 3次握手、4次挥手 5. socket 6. httpclient 遇到的问题 1. Q: 使用 EntityUtils.toString(responseEntity, "UTF-8") 中文乱码 2. Q: org.apache.http.NoHttpResponseException: 221.6.16.203:8890 failed …...

编程日记 2024/12/10 10:47:26

Scala的隐式对象和隐式类

1.隐式对象 object Test1 {case class DatabaseConfig(drive:String,url:String)//隐式对象//格式:就是在对象前面加一个 implicit//作用:给函数当默认值implicit object MySqlConfig extends DatabaseConfig("sqlserver.jdbc","localhost:3306")//定义一…...

编程日记 2024/12/10 10:46:24

【AIGC】2016-ACCV-即时追捕：自然环境下的自动唇音同步

2016-ACCV-Out of time: automated lip sync in the wild 摘要1. 引言1.1 相关作品 2. 表示和架构2.1 音频流2.2 视觉流2.3 损失函数2.4 训练 3. 数据集3.1 编制训练数据 4. 实验4.1 确定口型同步误差4.2 应用&#xff1a;主动说话人检测4.3 应用&#xff1a;唇读 5. 结论参考文…...

编程日记 2024/12/10 10:45:23

启智畅想集装箱箱号识别算法，2台相机即可实现较高识别率

启智畅想集装箱箱号识别算法&#xff0c;在货车通道中使用时&#xff0c;一般配备2台相机即可。启智畅想集装箱箱号识别算法&#xff0c;在货车通道中使用时&#xff0c;一般配备2台相机即可实现对集装箱箱号的精准捕捉与识别。这两台相机分别安装在货车通道的后侧和随意侧面&a…...

编程日记 2024/12/10 10:44:20

让IIS支持PUT请求解决IIS里不支持PUT请求的问题405 Method Not Allowed

文章目录 一、问题描述二、解决方案1.删除WebDav模块2.修改Web.config&#xff08;可选&#xff09; 一、问题描述 好不容易系统开发好了&#xff0c;兴高采烈地上线&#xff0c;部署好了网站&#xff0c;访问正常&#xff0c;打开方式正确&#xff01; 但当我修改某些数据时&…...

编程日记 2024/12/10 10:43:19

入门级捡垃圾工作站记录

入门级捡垃圾工作站记录 想法 一直想着拥有有一台自己的多功能机子&#xff0c;一个笔记本很难事事包办&#xff0c;本来打算配一个台式机&#xff0c;后来研究了一下&#xff0c;索性捡垃圾拼装的工作站&#xff0c;性价比更高&#xff0c;稳定性也更强&#xff0c;而且还可…...

编程日记 2024/12/10 10:42:18

2024.12.9——攻防世界ics-06

知识点&#xff1a;index文件 ics 文件&#xff08;iCalendar 格式文件&#xff09; bp抓包 密码爆破 题目&#xff1a;云平台报表中心收集了设备管理基础服务的数据&#xff0c;但是数据被删除了&#xff0c;只有一处留下了入侵者的痕迹。 一、解题思路 step 1 打开靶机审题…...

编程日记 2024/12/10 10:41:16

微信小程序介绍-以及写项目流程（重要）

前言&#xff1a;本篇文章介绍微信小程序以及项目介绍&#xff1a; 文章介绍&#xff1a;介绍了微信小程序常用的指令、组件、api。tips&#xff1a;最好按照官方文档来进行学习&#xff0c;大致可以我的目录来学习&#xff0c;对于写项目是没有问题的 微信小程序官方文档https…...

编程日记 2024/12/10 10:39:12

国内国际标准！羊毛衫检测项目、检测要求及标准

本文整理了羊毛衫检测项目、检测要求及标准有关内容 一、羊毛衫检测项目 羊毛衫的检测项目主要包括以下几个方面&#xff1a; 纤维含量检测&#xff1a;检测羊毛衫中羊毛及其他纤维的比例&#xff0c;确保纤维质量符合产品标识或相关标准要求。 甲醛含量检测&#xff1a;测…...

编程日记 2024/12/10 10:37:09

MySQL知识大总结（进阶）

一&#xff0c;数据库的约束 1&#xff0c;约束类型 1not null非空约束&#xff0c;标记这个字段不可以为空2unique唯一约束&#xff0c;标记这个字段的值是该列唯一的值&#xff0c;在这一列的其他行&#xff0c;不可以与该字段相等3default 默认约束&#xff0c;在该字段没…...

编程日记 2024/12/10 10:35:04

【C语言】库函数常见的陷阱与缺陷(2)：字符串转化函数

目录 一、atoi 函数 1.1. 功能与用法 1.2. 陷阱与缺陷 1.2.1. 输入验证不足 1.2.2. 溢出问题 1.3 安全替代 1.4. 代码示例 二、atof 函数 2.1. 功能与用法 2.2. 陷阱与缺陷 2.3. 安全使用建议 2.4. 代码示例 三、strtol 函数 3.1. 功能与用法 3.2. 陷阱与缺陷 …...

编程日记 2024/12/10 10:32:59

渗透测试基础

渗透测试基础是指对计算机系统、网络或应用程序进行模拟攻击&#xff0c;以发现其安全漏洞和潜在威胁的一种安全评估技术。通过模拟真实的攻击场景&#xff0c;渗透测试帮助组织了解其系统的安全弱点、验证防护措施的有效性&#xff0c;并提供改进建议。 渗透测试的核心概念 1…...

编程日记 2024/12/10 10:31:58

传奇996_53——后端ui窗口局部刷新

描述&#xff1a;一个大窗口&#xff0c;点击某个键&#xff0c;弹出小窗口。 小窗口中将msg存进变量中 大窗口中判断一个参数是否为null&#xff0c;如果不为null&#xff0c;说明界面不是第一次打开&#xff0c;而是被刷新了。就加上小窗口的那个变量 有时小窗口中还有其他…...

编程日记 2024/12/10 10:29:53

C++ constexpr vs const

笼统的讲 constexpr 主要用于编译时期&#xff0c;const用于运行时&#xff0c;但实际上两者都可以同时用于编译时期和运行时。 const const可以修饰全局变量&#xff0c;局部变量&#xff0c;函数参数&#xff0c;指针&#xff0c;引用&#xff0c;也可以修饰类成员函数&…...

编程日记 2024/12/10 10:28:50

【达梦数据库】存储过程调用实践案例-select

目录 前言创建表插入数据查询表中数据创建存储过程打开dbms_output包输出开关调用存储过程 前言 如果要在存储过程中执行一个SELECT语句并处理其结果&#xff0c;你不能直接使用EXECUTE IMMEDIATE&#xff0c;因为EXECUTE IMMEDIATE主要用于执行那些不返回行的语句&#xff08;…...

编程日记 2024/12/10 10:27:49

041_Compare_Matrix_Squre_Sum_in_MATLAB中矩阵平方和的比较

矩阵平方和的计算 矩阵平方和的定义 矩阵平方和的定义是对矩阵中的每一个元素进行平方&#xff0c;然后求和。 对于一个矩阵 A A A&#xff0c;其平方和定义为&#xff1a; sum ∑ i 1 m ∑ j 1 n A ( i , j ) 2 \text{sum} \sum_{i1}^{m}\sum_{j1}^{n} A(i,j)^2 sumi1∑…...

编程日记 2024/12/10 10:26:47

在OpenClaw中集成Taotoken实现多模型Agent工作流的详细步骤

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 在OpenClaw中集成Taotoken实现多模型Agent工作流的详细步骤 对于使用OpenClaw构建AI Agent的开发者而言&#xff0c;能够灵活调用不…...

编程新知 2026/5/15 22:08:30

从Processing到Arduino IDE：一个让硬件编程变简单的GUI故事（附STM32兼容板配置避坑）

从Processing到Arduino IDE&#xff1a;硬件编程的平民化革命与STM32实战指南 2005年&#xff0c;当Massimo Banzi在意大利伊夫雷亚交互设计学院第一次向学生们展示那块蓝色电路板时&#xff0c;他可能没想到这个简单的教学工具会彻底改变嵌入式开发的世界。Arduino IDE的诞生并…...

编程新知 2026/5/15 21:13:28

不止Keil5：VSCode+GCC也能玩转GD32单片机？手把手教你搭建轻量级开发环境

超越Keil5&#xff1a;用VSCodeGCC打造高效GD32开发环境 在嵌入式开发领域&#xff0c;Keil MDK长期以来一直是ARM架构单片机开发的主流选择。然而&#xff0c;随着现代开发工具的演进&#xff0c;越来越多的开发者开始寻求更轻量、更灵活且完全免费的替代方案。本文将带你探索…...

编程新知 2026/5/15 20:58:36

攻克：C8051Fxxx uVision驱动在Keil Debug中“隐身”的安装与配置实战

1. 问题背景与现象分析 第一次接触C8051Fxxx系列芯片的开发者&#xff0c;大概率会在Keil uVision环境中遇到一个让人抓狂的问题&#xff1a;明明按照官方文档安装了驱动&#xff0c;但在Debug选项列表中死活找不到"C8051Fxxx uVision"这个关键驱动。我当年接手公司一…...

编程新知 2026/5/15 18:29:54

Jetson Nano到手第一步：保姆级系统烧录与基础环境配置（避坑指南）

Jetson Nano开箱实战&#xff1a;从零构建AI开发环境的完整指南 刚拆封的Jetson Nano开发板躺在桌面上&#xff0c;这块仅有信用卡大小的设备却蕴含着强大的边缘计算能力。对于初次接触嵌入式AI开发的工程师而言&#xff0c;如何正确完成系统初始化往往成为第一个技术门槛。本文…...

编程新知 2026/5/15 17:06:09

Klaxon与Jackson对比：选择最适合你的Kotlin JSON解析器

Klaxon与Jackson对比&#xff1a;选择最适合你的Kotlin JSON解析器 【免费下载链接】klaxon A JSON parser for Kotlin 项目地址: https://gitcode.com/gh_mirrors/kl/klaxon 在Kotlin开发中&#xff0c;JSON解析是处理数据交换的核心任务之一。Klaxon作为一款专为Kotli…...

编程新知 2026/5/15 16:33:04

深度解析：开源AI框架如何实现智能文档转换与自动化工作流

深度解析&#xff1a;开源AI框架如何实现智能文档转换与自动化工作流 【免费下载链接】PPTAgent An Agentic Framework for Reflective PowerPoint Generation 项目地址: https://gitcode.com/gh_mirrors/pp/PPTAgent PPTAgent是一个基于多代理架构的开源AI框架&#xf…...

编程新知 2026/5/15 15:54:35

GitHub星标6.6k+的WindTerm，除了快还有这些隐藏技巧：自动补全、锁屏密码重置、主题切换

GitHub星标6.6k的WindTerm高阶技巧&#xff1a;解锁专业级终端体验 当大多数用户还在用默认配置与终端工具"和平共处"时&#xff0c;真正的效率追求者早已开始挖掘那些藏在菜单深处的生产力加速器。作为GitHub上获得6.6k星标的现象级终端工具&#xff0c;WindTerm的…...

编程新知 2026/5/15 15:52:34

思源宋体：中文排版设计中的成本效益革命

思源宋体&#xff1a;中文排版设计中的成本效益革命 【免费下载链接】source-han-serif-ttf Source Han Serif TTF 项目地址: https://gitcode.com/gh_mirrors/so/source-han-serif-ttf 你是否曾为商业项目中的中文字体授权费用而头疼&#xff1f;或者为寻找既专业又免费…...

编程新知 2026/5/15 15:08:31

如何用Draw.io ECE插件绘制教科书级别的电路图？

如何用Draw.io ECE插件绘制教科书级别的电路图&#xff1f; 【免费下载链接】Draw-io-ECE Custom-made draw.io-shapes - in the form of an importable library - for drawing circuits and conceptual drawings in draw.io. 项目地址: https://gitcode.com/gh_mirrors/dr/D…...

编程新知 2026/5/15 14:44:35