JavaScript 定时器详解:setTimeout 与 setInterval 的区别及使用

作者:拾光

时间:2026-10-27

浏览:323

本文详细介绍JavaScript中两种核心定时器:setTimeout(倒计)与setInterval(循环)。解析其参数含义、执行机制差异,并通过表单焦点获取示例展示实际应用。同时提供clearTimeout与clearInterval的清除方法,帮助开发者精准控制代码执行时机。

文章目录

JavaScript 定时器基础与区别

JavaScript 提供了两种主要的定时器机制:倒计时定时器与循环定时器。倒计时定时器语法为 `timename=setTimeout("function();",delaytime)`,而循环定时器语法为 `timename=setInterval("function();",delaytime)`。第一个参数指定定时器触发时执行的动作,可以是单个函数或多个函数,多个函数间需用分号“;”分隔。例如,若需弹出两个警告窗口,可将该参数替换为 `alert('第一个警告窗口!');alert('第二个警告窗口!');`。第二个参数 `delaytime` 代表间隔时间,单位为毫秒,填写“5000”即表示5秒。两者的核心区别在于触发频率:倒计时定时器仅在指定时间到达后触发一次事件,而循环定时器则在每个间隔时间到来时反复触发事件。例如,页面打开后希望间隔几秒自动跳转至另一页面,应使用倒计时定时器 `setTimeout("function();",delaytime)`;若需实现文字逐字显示效果,则需使用循环定时器 `setInterval("function();",delaytime)`。

表单焦点获取应用

获取表单当前获得焦点的元素,可使用 `document.activeElement.id`。通过判断 `document.activeElement.id` 与特定表单 ID 是否一致,可确定焦点所在。例如代码 `if ("mid" == document.activeElement.id) {alert();}` 中,"mid" 即为对应表单的 ID。

定时器核心概念

定时器的主要作用是指定在特定时间段后执行某段程序代码。

setTimeout 与 setInterval 详解

在 JavaScript 中,`setTimeout` 和 `setInterval` 常用于定时执行代码,二者存在显著区别,且都具备相应的解除方法。

setTimeout 使用方法

`setTimeout(Expression,DelayTime)` 会在 `DelayTime` 时间过后执行一次 `Expression`,常用于延迟一段时间后执行某项操作。调用形式为 `setTimeout("function",time)`,用于设置一个超时对象。

setInterval 使用方法

`setInterval(expression,delayTime)` 会在每个 `DelayTime` 间隔时执行 `Expression`,常用于定期刷新表达式。调用形式为 `setInterval("function",time)`,用于设置一个循环定时器对象。

重复执行特性对比

`setInterval` 会自动重复执行,而 `setTimeout` 不会重复执行。

清除定时器的方法

清除已设置的 `setTimeout` 对象需使用 `clearTimeout(对象)`;清除已设置的 `setInterval` 对象需使用 `clearInterval(对象)`。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章