JavaScript定时器是JavaScript中用于控制代码执行时机的重要工具，它允许开发者在特定的时间间隔后或者一次性执行指定的函数。在JavaScript中，主要有两种类型的定时器：`setInterval()` 和 `setTimeout()`。
1. `setInterval()` 用于周期性地执行某个函数。这个函数接收两个参数：一个是要执行的函数或字符串，另一个是执行间隔的时间（以毫秒为单位）。例如：
```javascript
var timeId = setInterval(function() {
console.log('每隔1秒打印一次');
}, 1000);
```
要清除由`setInterval()`创建的定时器，可以使用`clearInterval()`，并传入定时器的返回值作为参数，如下所示：
```javascript
clearInterval(timeId);
```
2. `setTimeout()` 则用于在指定延迟后仅执行一次函数。同样接收两个参数：函数或字符串，以及延迟时间。例如：
```javascript
setTimeout(function() {
console.log('延迟1秒后执行');
}, 1000);
```
如果需要取消已设置的`setTimeout()`，可以使用`clearTimeout()`，传入`setTimeout()`返回的ID：
```javascript
var timeoutId = setTimeout(function() {}, 1000);
clearTimeout(timeoutId);
```
使用定时器时，有几点需要注意：
- **防止定时器累加**：当定时器已经设置，但用户操作需要暂停或改变定时器时，应先清除旧的定时器再重新设置，以避免多个定时器同时运行。
- **内存管理**：确保在不再需要定时器时清除它，以释放内存资源。
- **异步执行**：定时器中的代码是非阻塞的，会在当前执行上下文结束后进行。这意味着它们可能不会按照预期立即执行。
- **时间间隔不精确**：JavaScript定时器的时间间隔不是绝对准确的，尤其是在浏览器处理其他任务时可能会延迟执行。
**示例1：秒表计时**
这是一个简单的秒表应用，通过`setInterval()`实现计时功能。当用户点击“开启”按钮时，计时器开始计数，点击“结束”停止计时，点击“清零”重置计时器。
```html
<button id="btn1">开启</button>
<button id="btn2">结束</button>
<button id="btn3">清零</button>
<span id="totalTime">0</span> 秒
```
```javascript
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var btn3 = document.getElementById('btn3');
var totalTime = document.getElementById('totalTime');
var second = 0;
var timer = null;
btn1.onclick = function() {
clearInterval(timer);
timer = setInterval(function() {
second++;
totalTime.innerHTML = second;
}, 1000);
};
btn2.onclick = function() {
clearInterval(timer);
};
btn3.onclick = function() {
clearInterval(timer);
second = 0;
totalTime.innerHTML = second;
};
```
**示例2：节假日倒计时**
这是一个节假日倒计时的示例，可以显示距离特定日期的剩余时间。使用`setInterval()`每秒更新倒计时。
```html
<div id="time"></div>
```
```javascript
function countdown(date) {
var now = new Date();
var distance = date - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("time").innerHTML = days + "天 " + hours + "小时 "
+ minutes + "分钟 " + seconds + "秒 ";
}
setInterval(function() {
countdown(new Date(2022, 11, 25)); // 假设节假日为2022年12月25日
}, 1000);
```
这两个示例展示了定时器在实际应用场景中的用法，无论是实时更新的计时功能还是倒计时，都能体现定时器的强大功能。
