原生JS计时器的使用方法有两种主要方式：setTimeout、setInterval。其中，setTimeout 用于在指定时间后执行一次操作，setInterval 用于每隔指定时间重复执行操作。下面将详细展开介绍这两种方法的使用及其应用场景。
一、setTimeout
1. 基本用法
setTimeout 函数用于在指定的延迟时间后执行一次特定的代码。其基本语法如下：
setTimeout(function, delay);
function：要执行的函数。delay：延迟时间，以毫秒为单位。
例如：
setTimeout(function() {
console.log('This message is displayed after 3 seconds');
}, 3000);
在上面的例子中，console.log 将在3秒后执行。
2. 使用箭头函数
ES6引入了箭头函数，使得代码更加简洁：
setTimeout(() => {
console.log('This is an arrow function example');
}, 2000);
3. 传递参数
setTimeout 还允许传递参数给回调函数：
function greet(name) {
console.log('Hello ' + name);
}
setTimeout(greet, 1000, 'Alice');
在上述例子中，greet 函数将在1秒后被调用，并接收参数 'Alice'。
4. 清除超时
如果你需要在超时之前取消调用，可以使用 clearTimeout：
let timeoutId = setTimeout(() => {
console.log('This will not be displayed');
}, 5000);
clearTimeout(timeoutId);
在这个例子中，clearTimeout 取消了之前设置的超时操作。
二、setInterval
1. 基本用法
setInterval 函数用于每隔指定的时间间隔重复执行某个操作。其基本语法如下：
setInterval(function, interval);
function：要执行的函数。interval：间隔时间，以毫秒为单位。
例如：
setInterval(() => {
console.log('This message is displayed every 2 seconds');
}, 2000);
在上面的例子中，console.log 将每隔2秒执行一次。
2. 清除间隔
如果你需要停止重复执行，可以使用 clearInterval：
let intervalId = setInterval(() => {
console.log('This will be displayed only once');
clearInterval(intervalId);
}, 2000);
在这个例子中，clearInterval 在第一次执行后立即取消了间隔操作。
3. 实用场景
setInterval 常用于创建实时计时器或定时更新页面内容，例如：
let count = 0;
let intervalId = setInterval(() => {
count += 1;
console.log(`Counter: ${count}`);
if (count >= 5) {
clearInterval(intervalId);
}
}, 1000);
上述代码将每秒更新一次计数器，并在达到5次后停止。
三、计时器的应用场景
1. 动画效果
计时器常用于在网页中创建动画效果。例如，逐渐显示或隐藏元素：
function fadeOut(element) {
let op = 1; // initial opacity
let timer = setInterval(() => {
if (op <= 0.1) {
clearInterval(timer);
element.style.display = 'none';
}
element.style.opacity = op;
op -= 0.1;
}, 50);
}
let element = document.getElementById('myElement');
fadeOut(element);
在这个例子中，fadeOut 函数每50毫秒减少元素的不透明度，直到其完全隐藏。
2. 实时数据更新
在动态网页中，计时器用于定时刷新数据，例如股票市场的实时价格：
function fetchData() {
// Assume fetchStockPrice is a function that fetches the current stock price
fetchStockPrice().then(price => {
document.getElementById('stockPrice').innerText = price;
});
}
setInterval(fetchData, 5000);
每隔5秒，fetchData 函数将更新股票价格。
3. 倒计时
计时器也用于实现倒计时功能：
let remainingTime = 10;
let countdown = setInterval(() => {
if (remainingTime <= 0) {
clearInterval(countdown);
console.log('Time is up!');
} else {
console.log(`Remaining time: ${remainingTime} seconds`);
remainingTime -= 1;
}
}, 1000);
上述代码每秒更新一次剩余时间，并在倒计时结束时停止。
四、注意事项
1. 性能影响
频繁使用 setInterval 或短时间间隔的 setTimeout 可能会影响性能，尤其是在复杂的动画或数据更新场景中。可以考虑使用 requestAnimationFrame 来优化动画效果。
2. 内存泄漏
确保在适当的时候清除计时器，以避免内存泄漏。例如，在组件卸载或页面关闭时清除计时器：
window.addEventListener('beforeunload', () => {
clearInterval(intervalId);
});
3. 时间精度
由于 JavaScript 的单线程特性，计时器的精度可能受到其他任务的影响。因此，不要依赖计时器来完成高精度的时间任务。
五、综合应用实例
下面我们通过一个综合实例展示如何使用 setTimeout 和 setInterval 创建一个简单的倒计时和动画效果的网页应用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Timer Example</title>
<style>
#timer {
font-size: 2em;
margin: 20px;
}
#box {
width: 100px;
height: 100px;
background-color: red;
margin: 20px;
opacity: 1;
}
</style>
</head>
<body>
<div id="timer">10</div>
<div id="box"></div>
<script>
// Countdown Timer
let timeLeft = 10;
let timerId = setInterval(() => {
if (timeLeft <= 0) {
clearInterval(timerId);
document.getElementById('timer').innerText = 'Time is up!';
} else {
document.getElementById('timer').innerText = timeLeft;
timeLeft -= 1;
}
}, 1000);
// Fade Out Animation
function fadeOut(element) {
let op = 1; // initial opacity
let timer = setInterval(() => {
if (op <= 0.1) {
clearInterval(timer);
element.style.display = 'none';
}
element.style.opacity = op;
op -= 0.1;
}, 100);
}
let box = document.getElementById('box');
setTimeout(() => fadeOut(box), 5000);
</script>
</body>
</html>
在这个实例中，我们创建了一个倒计时器和一个渐隐动画。在页面加载后，倒计时器每秒更新一次，倒计时结束后显示“Time is up!”。同时，页面加载5秒后，红色方块开始逐渐消失。
通过以上内容，我们详细介绍了原生JS计时器的使用方法及其应用场景，并通过具体实例展示了如何实现计时器功能。希望这些内容能够帮助你更好地理解和使用JavaScript的计时器。
相关问答FAQs：
1. 如何使用原生JS创建一个简单的计时器？
问题： 如何使用原生JS创建一个简单的计时器？
答案：
可以使用setInterval函数来创建一个简单的计时器。以下是一个示例代码：
// 设置初始时间
let seconds = 0;
// 创建计时器函数
function startTimer() {
// 每秒钟增加1秒
seconds++;
// 将时间显示在页面上
document.getElementById('timer').innerHTML = seconds;
}
// 每秒钟调用一次计时器函数
setInterval(startTimer, 1000);
在上述代码中，我们首先定义了一个初始时间seconds，然后创建了一个名为startTimer的函数，该函数在每次调用时将初始时间增加1秒，并将最新的时间显示在页面上。最后，我们使用setInterval函数每秒钟调用一次startTimer函数，以实现计时器的功能。
2. 如何在原生JS计时器中添加暂停和重置功能？
问题： 如何在原生JS计时器中添加暂停和重置功能？
答案：
要在原生JS计时器中添加暂停和重置功能，可以使用clearInterval函数来清除计时器，并使用额外的变量来跟踪计时器状态。以下是一个示例代码：
// 设置初始时间和计时器状态
let seconds = 0;
let isRunning = false;
let timerInterval;
// 创建计时器函数
function startTimer() {
seconds++;
document.getElementById('timer').innerHTML = seconds;
}
// 开始计时器
function start() {
if (!isRunning) {
isRunning = true;
timerInterval = setInterval(startTimer, 1000);
}
}
// 暂停计时器
function pause() {
if (isRunning) {
isRunning = false;
clearInterval(timerInterval);
}
}
// 重置计时器
function reset() {
seconds = 0;
document.getElementById('timer').innerHTML = seconds;
pause();
}
// 调用示例
start(); // 开始计时器
pause(); // 暂停计时器
reset(); // 重置计时器
在上述代码中，我们添加了三个新函数：start、pause和reset。start函数用于开始计时器，它首先检查计时器是否已经在运行，如果没有，它会将isRunning变量设置为true，然后使用setInterval函数启动计时器。pause函数用于暂停计时器，它首先检查计时器是否正在运行，如果是，则将isRunning变量设置为false，然后使用clearInterval函数停止计时器。reset函数用于重置计时器，它将seconds变量重置为0，并将页面上的时间显示更新为0，然后调用pause函数以确保计时器被暂停。
3. 如何在原生JS计时器中添加倒计时功能？
问题： 如何在原生JS计时器中添加倒计时功能？
答案：
要在原生JS计时器中添加倒计时功能，可以将初始时间设定为目标时间，并在计时器函数中每秒钟减少1秒，直到时间为0。以下是一个示例代码：
// 设置目标时间和计时器状态
let targetTime = 60; // 目标时间为60秒
let isRunning = false;
let timerInterval;
// 创建计时器函数
function startTimer() {
if (targetTime > 0) {
targetTime--;
} else {
clearInterval(timerInterval);
alert("倒计时完成！");
}
document.getElementById('timer').innerHTML = targetTime;
}
// 开始倒计时
function start() {
if (!isRunning) {
isRunning = true;
timerInterval = setInterval(startTimer, 1000);
}
}
// 调用示例
start(); // 开始倒计时
在上述代码中，我们将初始时间targetTime设置为60秒，并在startTimer函数中每秒钟减少1秒。如果时间大于0，则继续倒计时，否则使用clearInterval函数停止计时器，并显示一个倒计时完成的提示。最后，我们使用setInterval函数每秒钟调用一次startTimer函数，以实现倒计时的功能。
文章包含AI辅助创作，作者：Edit2，如若转载，请注明出处：https://docs.pingcode.com/baike/3614839
