JavaScript 中的定时器397

JavaScript 中的定时器是用于在指定的时间间隔内执行特定功能或代码块的机制。它允许开发者创建延迟执行或重复执行的任务，从而增强 Web 应用的交互性和响应性。

定时器类型JavaScript 中有两种主要类型的定时器：
* setTimeout()：执行一次功能。
* setInterval()：重复执行功能，直到明确清除。

setTimeout()语法：
```
setTimeout(callback, milliseconds);
```
* callback：要执行的函数。
* milliseconds：以毫秒为单位的延迟时间。
示例：
```
setTimeout(() => {
("延迟 2 秒后执行");
}, 2000);
```

setInterval()语法：
```
setInterval(callback, milliseconds);
```
* callback：要执行的函数。
* milliseconds：以毫秒为单位的重复间隔。
示例：
```
const intervalId = setInterval(() => {
("每 1 秒执行一次");
}, 1000);
```

要停止重复执行，请使用 clearInterval() 方法，传入定时器的 ID：```
clearInterval(intervalId);
```

clearTimeout()语法：
```
clearTimeout(timerId);
```
* timerId：由 setTimeout() 返回的 ID。
示例：
```
const timerId = setTimeout(() => {
("延迟 2 秒后执行");
}, 2000);
clearTimeout(timerId); // 取消延迟执行
```

其他特性

精度

定时器的精度受系统资源和浏览器实现的影响。实际延迟时间可能略微偏离指定的时间间隔。

嵌套定时器

可以通过在定时器回调中调用其他定时器来创建嵌套定时器。这允许创建复杂的时间表和延迟执行序列。

绑定的值

定时器回调中的 this 关键字绑定到调用 setTimeout() 或 setInterval() 的对象。

异步执行

定时器会在事件循环的主事件队列中排队。这使得它们与其他同步代码异步执行。

用法示例

延迟加载图像

```
const img = ('img');
= '';
setTimeout(() => {
('loading');
}, 500);
```

创建幻灯片

```
const images = ['', '', ''];
let currentIndex = 0;
const intervalId = setInterval(() => {
const img = ('img');
= images[currentIndex];
currentIndex = (currentIndex + 1) % ;
}, 3000);
```

模拟打字效果

```
const text = '欢迎来到 JavaScript 世界';
let index = 0;
const intervalId = setInterval(() => {
const char = text[index];
if (char === undefined) {
clearInterval(intervalId);
('p').innerHTML = text;
} else {
('p').innerHTML += char;
index++;
}
}, 100);
```

JavaScript 定时器是控制 Web 应用中时间行为的强大工具。通过使用 setTimeout() 和 setInterval()，开发者可以延迟执行函数、重复执行任务并创建交互式效果。了解定时器的精度、绑定的值和异步执行特性对于有效地利用它们至关重要。

2024-12-02

---

上一篇：前端开发实战：深入浅出解读 JavaScript 表单提交

下一篇：JavaScript 入门指南