HTML DOM setTimeout() 方法

封面图 • 2025-12-19 • JavaScript

在 HTML 和 JavaScript 中，`setTimeout()` 是一个非常常用的函数，用于**延迟执行某段代码**。它属于 **JavaScript 的全局函数**，而不是 HTML DOM 的方法（尽管它常用于操作 DOM）。

---

## ✅ 一、`setTimeout()` 简介

`setTimeout()` 的作用是：**在指定的毫秒数之后，执行一次指定的函数或代码块**。

### 语法：
```javascript
setTimeout(function, milliseconds);
```

- `function`：要执行的函数或代码字符串。
- `milliseconds`：等待的时间，单位是毫秒（1000 毫秒 = 1 秒）。

---

## ✅ 二、使用示例

### 示例 1：简单调用
```javascript
setTimeout(function() {
    alert("3 秒后显示这个提示框！");
}, 3000);
```

### 示例 2：直接写代码（不推荐）
```javascript
setTimeout("alert('3 秒后显示这个提示框！');", 3000);
```

> ⚠️ 注意：不建议使用字符串方式，因为安全性差，难以调试。

---

## ✅ 三、返回值

`setTimeout()` 返回一个 **定时器 ID**，可以用来取消该定时器。

```javascript
let timerId = setTimeout(() => {
    console.log("这会执行");
}, 2000);

// 取消定时器
clearTimeout(timerId);
```

---

## ✅ 四、与 HTML DOM 的关系

虽然 `setTimeout()` 不是 HTML DOM 的方法，但它经常被用来**操作 DOM 元素**，比如：

### 示例：3 秒后改变元素内容
```html
<!DOCTYPE html>
<html>
<body>

</body>
</html>
```

---

## ✅ 五、常见用途

- 延迟加载数据
- 实现动画效果
- 防抖/节流
- 延迟执行某些操作（如表单提交后的跳转）

---

## ✅ 六、注意事项

- `setTimeout()` 不是“精确”的定时器，实际执行时间可能略大于设定时间。
- 如果页面关闭或刷新，所有 `setTimeout()` 会被清除。
- 多个 `setTimeout()` 之间可能会有重叠或冲突，注意管理。

---

## ✅ 七、相关函数

| 函数         | 说明                         |
|--------------|------------------------------|
| `setTimeout()` | 延迟执行一次函数             |
| `setInterval()`| 重复执行函数（每隔一段时间） |
| `clearTimeout()` | 清除由 `setTimeout()` 设置的定时器 |
| `clearInterval()` | 清除由 `setInterval()` 设置的定时器 |

---

如果你需要更具体的例子（如结合 DOM 操作、动画等），欢迎继续提问！