一、setTimeout() 方法 用来定义一个定时器
setTimeout()方法用于在指定的毫秒数后执行一次函数。- 语法：
setTimeout(function, delay[, arg1, arg2,...])。其中，function是要执行的函数，delay是延迟的毫秒数，后面的参数是传递给函数的参数。 - 例如：
function sayHello() {
console.log('Hello!');
}
setTimeout(sayHello, 2000); // 2 秒后执行 sayHello 函数
二、setInterval()
setInterval()方法用于按照指定的时间间隔重复执行函数。- 语法：
setInterval(function, delay[, arg1, arg2,...])。参数与setTimeout()相同。 - 例如：
function updateClock() {
// 更新时钟显示的代码
}
setInterval(updateClock, 1000);
// 每 1 秒执行一次 updateClock 函数
三、清除定时器
- 可以使用
clearTimeout()和clearInterval()方法来清除已经设置的定时器。 - 例如：
let timerId = setTimeout(sayHello, 2000);
// 某些情况下需要清除定时器
clearTimeout(timerId);
let intervalId = setInterval(updateClock, 1000);
// 停止时钟更新
clearInterval(intervalId);
定时功能在 Js中非常有用，可以帮助你实现各种动态效果和定时任务。但在使用时要注意合理设置时间间隔，避免过度消耗资源或影响性能。同时，要确保在不需要定时器时及时清除它们，以防止内存泄漏。
以下是一些 JavaScript 定时功能的案例：
案例一：定时显示问候语
function showGreeting() {
console.log('Hello! This greeting is displayed after 3 seconds.');
}
setTimeout(showGreeting, 3000);
案例二：倒计时
let seconds = 10;
function countdown() {
if (seconds > 0) {
console.log(`Seconds remaining: ${seconds}`);
seconds--;
setTimeout(countdown, 1000);
} else {
console.log('Countdown finished!');
}
}
setTimeout(countdown, 1000);
案例三：定时切换图片
假设页面中有一个 <img> 元素，其 id 为 image。
<img id="image" src="image1.jpg" alt="Image">
let imageIndex = 0;
const images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
function changeImage() {
const imageElement = document.getElementById('image');
imageElement.src = images[imageIndex];
imageIndex = (imageIndex + 1) % images.length;
setTimeout(changeImage, 2000);
}
setTimeout(changeImage, 2000);
案例四：在线时钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="clock"></div>
<script>
function updateClock() {
const now = new Date();
const hours = now.getHours().toString().padStart(2, '0');
const minutes = now.getMinutes().toString().padStart(2, '0');
const seconds = now.getSeconds().toString().padStart(2, '0');
const timeString = `${hours}:${minutes}:${seconds}`;
document.getElementById('clock').textContent = timeString;
}
setInterval(updateClock, 1000);
updateClock(); // 立即显示一次时间
</script>
</body>
</html>
最后再来聊一聊使用定时器可能会遇到的一些常见错误：
一、忘记清除定时器 尤其是新手特别容易忘记
- 如果不及时清除定时器，可能会导致内存泄漏和性能问题。特别是在定时器不再需要时，应使用
clearTimeout()或clearInterval()清除定时器。 - 例如：
let timerId = setTimeout(function() {
console.log('This will run after 2 seconds.');
}, 2000);
// 某些情况下忘记清除定时器
// clearTimeout(timerId);
二、定时器延迟不准确
- 浏览器中的定时器并不保证完全准确的延迟时间。由于浏览器的其他任务和事件处理，定时器可能会延迟执行。
- 例如，设置一个定时器为每 100 毫秒执行一次任务，但实际执行时间可能会有所偏差。
- 在对时间精度要求较高的场景下，可能需要考虑其他解决方案或进行时间补偿。
三、在定时器函数中引用外部变量的问题
- 如果在定时器函数中引用外部变量，可能会因为变量的值在定时器执行之前发生变化而导致意外的结果。
- 例如：
let count = 0;
setInterval(function() {
console.log(count);
}, 1000);
// 在定时器执行之前，count 可能会被其他代码修改
count = 10;
四、嵌套定时器导致的混乱
- 过多地嵌套定时器可能会使代码变得复杂和难以维护，并且容易出现错误。
- 例如：
setTimeout(function() {
console.log('First timer.');
setTimeout(function() {
console.log('Second timer.');
// 可能会继续嵌套更多定时器
}, 1000);
}, 2000);
五、定时器与异步操作的冲突
- 如果在定时器执行期间有异步操作正在进行，可能会导致不可预测的结果。
- 例如，定时器触发时，一个异步函数正在等待数据返回，而定时器函数可能会在数据返回之前执行，导致错误的逻辑。
- 在处理异步操作时，需要确保定时器与异步操作的协调和正确的顺序执行。
