JavaScript 定时器
在 JavaScript 中，定时器是实现代码在特定时间间隔执行或延迟执行的重要工具。下面我们将深入探讨定时器的相关知识。
定时器基础
setTimeout()
setTimeout() 函数用于在指定的延迟时间后执行一次回调函数。它接受两个参数，第一个参数是要执行的回调函数，第二个参数是延迟的毫秒数。示例如下：
function sayHello() {
console.log('Hello!');
}
// 3 秒后执行 sayHello 函数
setTimeout(sayHello, 3000);
也可以使用箭头函数简化代码：
setInterval()
setInterval() 函数用于按照指定的时间间隔重复执行回调函数。同样接受两个参数，参数含义与 setTimeout() 相同。示例：
function showTime() {
const now = new Date();
console.log(now.toLocaleTimeString());
}
// 每秒执行一次 showTime 函数
setInterval(showTime, 1000);
clearTimeout () 和 clearInterval ()
如果需要取消 setTimeout() 或 setInterval() 设置的定时器，可以使用 clearTimeout() 和 clearInterval() 函数。这两个函数接受一个定时器 ID 作为参数，该 ID 是 setTimeout() 或 setInterval() 函数返回的值。示例如下：
// 设置一个定时器
const timerId = setTimeout(() => {
console.log('This will not be printed if cleared.');
}, 5000);
// 取消定时器
clearTimeout(timerId);
对于 setInterval() 取消操作类似：
const intervalId = setInterval(() => {
console.log('Repeating...');
}, 2000);
// 3 秒后取消定时器
setTimeout(() => {
clearInterval(intervalId);
console.log('Interval cleared.');
}, 3000);
定时器的应用场景
实现轮播图
利用 setInterval() 可以实现图片的自动轮播效果。以下是一个简单的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.slider {
width: 300px;
height: 200px;
overflow: hidden;
}
.slides {
display: flex;
width: 900px;
transition: transform 0.5s ease;
}
.slide {
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<div class="slider">
<div class="slides">
<img class="slide" src="https://picsum.photos/300/200?random=1" alt="Slide 1">
<img class="slide" src="https://picsum.photos/300/200?random=2" alt="Slide 2">
<img class="slide" src="https://picsum.photos/300/200?random=3" alt="Slide 3">
</div>
</div>
<script>
const slides = document.querySelector('.slides');
let currentIndex = 0;
const slideWidth = 300;
function nextSlide() {
currentIndex = (currentIndex + 1) % 3;
slides.style.transform = `translateX(-${currentIndex * slideWidth}px)`;
}
const intervalId = setInterval(nextSlide, 3000);
</script>
</body>
</html>
实现倒计时功能
使用 setInterval() 可以实现一个简单的倒计时器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="countdown">10</div>
<script>
let timeLeft = 10;
const countdownElement = document.getElementById('countdown');
const intervalId = setInterval(() => {
if (timeLeft > 0) {
timeLeft--;
countdownElement.textContent = timeLeft;
} else {
clearInterval(intervalId);
countdownElement.textContent = 'Time is up!';
}
}, 1000);
</script>
</body>
</html>
定时器的注意事项
异步执行
定时器是异步执行的，这意味着代码不会等待定时器执行完毕再继续执行后续代码。例如：
console.log('Before setTimeout');
setTimeout(() => {
console.log('Inside setTimeout');
}, 1000);
console.log('After setTimeout');
输出顺序为：
Before setTimeout
After setTimeout
Inside setTimeout
性能问题
过度使用定时器，尤其是 setInterval()，可能会导致性能问题，因为它会不断地触发回调函数。在不需要定时器时，应及时使用 clearTimeout() 或 clearInterval() 取消。
总之，JavaScript 定时器是一个强大的工具，合理使用它们可以为网页增加丰富的交互效果和功能。但在使用过程中，要注意异步执行和性能问题。