js基础篇~定时器
一、`setTimeout() 方法 用来定义一个定时器`1. `setTimeout()` 方法用于在指定的毫秒数后**执行一次函数。**
2. 语法：`setTimeout(function, delay[, arg1, arg2,...])`。其中，`function` 是要执行的函数，`delay` 是延迟的毫秒数，后面的参数是传递给函数的参数。
3. 例如：
```
function sayHello() {
console.log('Hello!');
}
setTimeout(sayHello, 2000); // 2 秒后执行 sayHello 函数
```
二、`setInterval() `
1. `setInterval()` 方法用于按照指定的时间间隔**重复执行函数。**
2. 语法：`setInterval(function, delay[, arg1, arg2,...])`。参数与 `setTimeout()` 相同。
3. 例如：
```
function updateClock() {
// 更新时钟显示的代码
}
setInterval(updateClock, 1000);
// 每 1 秒执行一次 updateClock 函数
```
三、清除定时器
1. 可以使用 `clearTimeout()` 和 `clearInterval()` 方法来清除已经设置的定时器。
2. 例如：
```
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 + 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>
```
最后再来聊一聊使用定时器可能会遇到的一些常见错误：
一、忘记清除定时器 尤其是新手特别容易忘记
1. 如果不及时清除定时器，可能会导致内存泄漏和性能问题。特别是在定时器不再需要时，应使用 `clearTimeout()` 或 `clearInterval()` 清除定时器。
2. 例如：
```
let timerId = setTimeout(function() {
console.log('This will run after 2 seconds.');
}, 2000);
// 某些情况下忘记清除定时器
// clearTimeout(timerId);
```
二、定时器延迟不准确
1. 浏览器中的定时器并不保证完全准确的延迟时间。由于浏览器的其他任务和事件处理，定时器可能会延迟执行。
2. 例如，设置一个定时器为每 100 毫秒执行一次任务，但实际执行时间可能会有所偏差。
3. 在对时间精度要求较高的场景下，可能需要考虑其他解决方案或进行时间补偿。
三、在定时器函数中引用外部变量的问题
1. 如果在定时器函数中引用外部变量，可能会因为变量的值在定时器执行之前发生变化而导致意外的结果。
2. 例如：
```
let count = 0;
setInterval(function() {
console.log(count);
}, 1000);
// 在定时器执行之前，count 可能会被其他代码修改
count = 10;
```
四、嵌套定时器导致的混乱
1. 过多地嵌套定时器可能会使代码变得复杂和难以维护，并且容易出现错误。
2. 例如：
```
setTimeout(function() {
console.log('First timer.');
setTimeout(function() {
console.log('Second timer.');
// 可能会继续嵌套更多定时器
}, 1000);
}, 2000);
```
五、定时器与异步操作的冲突
1. 如果在定时器执行期间有异步操作正在进行，可能会导致不可预测的结果。
2. 例如，定时器触发时，一个异步函数正在等待数据返回，而定时器函数可能会在数据返回之前执行，导致错误的逻辑。
3. 在处理异步操作时，需要确保定时器与异步操作的协调和正确的顺序执行。
页:
[1]