JS倒计时两种种实现方式

封面图 • 2025-05-08 • JavaScript

在 JavaScript 中，实现倒计时的方式有多种，以下是两种常见的实现方式：

### 方法一：使用 `setInterval` 实现倒计时

这种方法利用 `setInterval` 定时执行一个函数来更新倒计时的值。

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时 - setInterval</title>
</head>
<body>

</body>
</html>
```

#### 解释：
1. `countdown` 是倒计时的初始值。
2. 使用 `setInterval` 每隔 1 秒（1000 毫秒）执行一次回调函数。
3. 在回调函数中，`countdown` 减少 1，并将当前值显示在页面上。
4. 当 `countdown` 小于 0 时，清除定时器并显示 "时间到!"。

---

### 方法二：使用 `setTimeout` 实现递归倒计时

这种方法通过递归调用 `setTimeout` 来实现倒计时。

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时 - setTimeout</title>
</head>
<body>

function updateCountdown() {
        countdownElement.textContent = countdown;
        countdown--;

if (countdown >= 0) {
            setTimeout(updateCountdown, 1000); // 每隔 1 秒递归调用
        } else {
            countdownElement.textContent = "时间到!";
        }
    }

updateCountdown();
</script>

</body>
</html>
```

#### 解释：
1. `updateCountdown` 函数负责更新倒计时值并检查是否结束。
2. 每次调用 `updateCountdown` 时，先更新倒计时值，然后递归调用自身，间隔为 1 秒。
3. 当 `countdown` 小于 0 时，停止递归并显示 "时间到!"。

---

### 总结：
- **`setInterval`** 更适合简单的定时任务，代码结构简单。
- **`setTimeout`** 更灵活，可以更好地控制递归逻辑，避免长时间运行导致的问题。

根据具体需求选择合适的方法即可。