倒计时和定时任务通过 settimeout 与 setinterval 实现，前者用于活动倒计时等场景，后者用于轮询数据更新；需保留定时器 id 并在适当时机调用 cleartimeout 或 clearinterval 清除，避免内存泄漏。
前端倒计时和定时任务是常见的交互需求，比如活动倒计时、验证码重发、轮询数据更新等。JavaScript 提供了 setTimeout 和 setInterval 两个核心方法来实现这些功能。下面介绍如何用 JS 实现常见场景。
倒计时功能实现
倒计时通常用于显示距离某个时间点还有多久。我们可以基于目标时间与当前时间的差值，动态更新页面内容。
以下是一个简单的倒计时示例，计算距离指定日期（如 2025-12-31）的天、时、分、秒：
function startCountdown(targetDate) {
const timer = setInterval(() => {
const now = new Date().getTime();
const distance = targetDate - now;
<pre class='brush:php;toolbar:false;'>if (distance < 0) {
clearInterval(timer);
document.getElementById("countdown").innerHTML = "倒计时结束！";
return;
}
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("countdown").innerHTML =
`${days}天 ${hours}小时 ${minutes}分 ${seconds}秒`;}, 1000); }
// 使用示例 const target = new Date("2025-12-31T00:00:00").getTime(); startCountdown(target);
这个函数每秒执行一次，直到倒计时归零，自动清除定时器并提示结束。
立即学习“Java免费学习笔记（深入）”；
定时任务：周期性操作
使用 setInterval 可以让一段代码每隔固定时间执行一次，适合轮询接口、自动刷新数据等场景。
例如，每 5 秒请求一次服务器获取最新状态：
const pollTask = setInterval(async () => {
try {
const res = await fetch("/api/status");
const data = await res.json();
console.log("当前状态:", data.status);
// 更新UI
document.getElementById("status").textContent = data.status;
} catch (err) {
console.error("请求失败", err);
}
}, 5000); // 每5秒执行一次
注意：长时间运行的定时任务应提供手动停止机制，避免内存泄漏。
取消定时任务
无论是 setTimeout 还是 setInterval，都应保留其返回的 ID，以便在需要时清除。
- clearTimeout(id)：清除延时任务
- clearInterval(id)：清除周期任务
例如，在组件卸载或用户跳转页面时停止倒计时：
let timerId;
<p>function start() {
timerId = setInterval(() => {
console.log("执行中...");
}, 1000);
}</p><p>function stop() {
clearInterval(timerId);
console.log("定时器已停止");
}</p>基本上就这些。掌握好定时器的启停逻辑，就能灵活应对大多数前端时间控制需求。不复杂但容易忽略的是清理机制——记得及时清除不需要的定时器。
