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() 可以实现图片的自动轮播效果。以下是一个简单的示例：

实现倒计时功能

使用 setInterval() 可以实现一个简单的倒计时器：

    
    



    
10
    

定时器的注意事项

异步执行

定时器是异步执行的，这意味着代码不会等待定时器执行完毕再继续执行后续代码。例如：

console.log('Before setTimeout');
setTimeout(() => {
    console.log('Inside setTimeout');
}, 1000);
console.log('After setTimeout');

输出顺序为：

Before setTimeout
After setTimeout
Inside setTimeout

性能问题

过度使用定时器，尤其是 setInterval()，可能会导致性能问题，因为它会不断地触发回调函数。在不需要定时器时，应及时使用 clearTimeout() 或 clearInterval() 取消。

总之，JavaScript 定时器是一个强大的工具，合理使用它们可以为网页增加丰富的交互效果和功能。但在使用过程中，要注意异步执行和性能问题。