JavaScript 定时器用法详解：setTimeout 与 setInterval

单次延迟执行：setTimeout

setTimeout 是 JavaScript 中最常用的定时器函数之一，它的主要功能是设置一个定时器，在指定的毫秒数之后执行某段程序或函数。需要注意的是，它只执行一次，不会自动重复。

语法结构

标准的调用格式如下：

[定时器对象名 =] setTimeout("表达式", 毫秒数);

其中，"表达式"通常是字符串形式的 JavaScript 语句，也可以是函数引用。在实际开发中，推荐使用函数引用来避免全局作用域污染和执行效率问题。

实际应用示例

以下示例展示了如何创建一个按钮，点击后在 5 秒钟弹出一个提示框：

<html>
<head>
<script type="text/javascript">
// 定义主函数
function count() {
    // 5秒后执行 alert 弹窗
    setTimeout("alert('执行成功');", 5000);
}
</script>
</head>
<body>
<!-- 点击按钮触发 count 函数 -->
<input type="button" value="执行" onclick="count()">
</body>
</html>

在这个例子中，用户点击"执行"按钮后，浏览器会等待 5000 毫秒（即 5 秒），然后弹出 "执行成功" 的对话框。一旦弹出，该次定时器任务即告结束。

循环定时执行：setInterval

如果需要让一段代码每隔一段时间就执行一次，应当使用 setInterval。它会返回一个标识符，利用这个标识符可以后续终止该循环定时器。

语法结构

[定时器对象名 =] setInterval("表达式", 毫秒数)

setInterval 会一直重复执行表达式，直到窗口被关闭，或者显式调用 clearInterval 来终止它。

实现数字累加器

下面是一个经典的时钟/计数器案例：页面上显示一个数字，每秒自增 1，并提供一个"停止"按钮来关闭定时器。

<html>
<head>
<script type="text/javascript">
var sec = 0;
// 启动循环定时器，每1000毫秒（1秒）执行一次 count 函数
// 注意将返回值赋值给 timeId 以便后续清除
var timeId = setInterval("count();", 1000);

function count() {
    // 获取元素并更新内容
    document.getElementById("num").innerHTML = sec++;
}

function stopCount() {
    // 使用 timeId 停止定时器
    clearInterval(timeId);
}
</script>
</head>
<body>
<font style="color:red" id="num">0</font>秒钟 <br>
<input type="button" value="停止" onclick="stopCount();">
</body>
</html>

在此示例中：
- 初始变量 sec 设为 0。
- 加载脚本后立即启动 setInterval，将其 ID 保存在 timeId 中。
- count() 函数负责读取 id="num" 的元素，更新数值并递增。
- 点击"停止"按钮时，stopCount() 被调用，通过 clearInterval(timeId) 安全地销毁定时器，防止内存泄漏或逻辑错误。

关键注意事项

• 字符串 vs 函数引用： 虽然上述示例使用了字符串形式（如 "count();"），但在现代开发中，直接传递函数名（如 setInterval(count, 1000)）性能更好且不易出错。
• 精确度限制： 浏览器的定时器受单线程模型影响，如果当前有其他耗时操作（如复杂计算或渲染阻塞），回调函数的实际执行时间可能会晚于设定的时间。
• 清理资源： 使用 setInterval 创建的定时器必须记得用 clearInterval 清理，特别是在组件卸载或页面跳转时，否则可能导致后台继续运行产生不可预知的行为。

以上就是 JavaScript 定时器 setTimeout 与 setInterval 的详细应用方法，更多关于 JavaScript 基础操作的资料请关注本站其它相关文章！