今天我们要聊聊JavaScript中的定时器——这个能让我们的代码在指定时间后执行或者周期性执行的小工具。无论你是想创建一个倒计时、动画效果，还是希望你的应用每隔一段时间就刷新数据，定时器都是你的好帮手。
JavaScript定时器基础
在JavaScript中，我们有两种主要的方式来使用定时器：
- setTimeout() - 这个函数用于在指定的时间后只执行一次代码。
- setInterval() - 这个函数会按照指定的时间间隔重复执行代码。
使用setTimeout()
setTimeout() 是 JavaScript 中的一个内置函数，它允许你在指定的延迟时间后执行一次代码。这个函数非常有用，可用于创建延时操作，例如等待一段时间后再显示一条消息、实现页面元素的淡入淡出效果等。
setTimeout() 的基本语法
let timeoutID = setTimeout(func, delay, [param1, param2, ...]);
- func: 必需。这是你想要在延迟之后执行的函数或代码字符串。使用函数表达式是推荐的做法。
- delay: 必需。这是延迟的时间，以毫秒为单位（1秒等于1000毫秒）。如果你设置的是0毫秒，浏览器会尽可能快地执行代码，但不是立即执行，因为还需要处理其他已经在队列中的任务。
- param1, param2, ... : 可选。这些参数会被传递给要执行的函数。
返回值
setTimeout() 函数返回一个整数 ID 值，这个值可以用于稍后通过 clearTimeout() 来取消定时器。
示例
简单的例子
// 3秒后打印 'Hello'
setTimeout(function() {
console.log('Hello');
}, 3000);
使用箭头函数和传递参数
// 使用箭头函数定义 greet 函数
const greet = (name) => {
console.log(`Hello, ${name}`);
};
// 5秒后调用 greet 函数，并传递参数 'World'
setTimeout(() => greet('World'), 5000);
清除定时器
如果你想在定时器触发之前取消它，你可以使用 clearTimeout() 方法：
let timer = setTimeout(() => console.log('This will not print'), 1000);
// 在定时器触发前清除它
clearTimeout(timer);
注意事项
- 如果你多次调用
setTimeout()并且没有保存它的返回值，或者忘记清除不再需要的定时器，可能会导致内存泄漏。 setTimeout()的实际执行时间可能比设定的延迟更长，这取决于JavaScript事件循环的状态。如果当前事件循环中还有其他的任务在排队等待处理，setTimeout()指定的任务将会被推迟到这些任务完成之后再执行。
使用setInterval()
setInterval() 是 JavaScript 中的一个内置函数，它允许你按照指定的时间间隔重复执行一段代码或函数。与 setTimeout() 类似，但不同的是 setInterval() 会持续地每隔一段时间就调用一次提供的函数，直到被显式地清除。
setInterval() 的基本语法
let intervalID = setInterval(func, delay[, arg1, arg2, ...]);
- func: 必需。这是你想要周期性执行的函数或要执行的代码字符串（不推荐使用代码字符串）。
- delay: 必需。这是每次调用之间的延迟时间，以毫秒为单位（1秒等于1000毫秒）。
- arg1, arg2, ... : 可选。这些参数会被传递给要执行的函数。
返回值
setInterval() 函数返回一个非零整数值，这个值可以用于稍后通过 clearInterval() 来取消定时器。
示例
简单的例子
// 每隔2秒打印 'Tick'
setInterval(function() {
console.log('Tick');
}, 2000);
使用箭头函数和传递参数
// 使用箭头函数定义 updateStatus 函数
const updateStatus = (status) => {
console.log(`Current status: ${status}`);
};
// 每隔5秒更新状态为 'Active'
setInterval(updateStatus, 5000, 'Active');
清除定时器
如果你在某个时刻决定不再需要这个定时器了，你可以使用 clearInterval() 方法来停止它：
let timer = setInterval(() => console.log('This will print every second'), 1000);
// 假设我们想在5秒后停止定时器
setTimeout(() => {
clearInterval(timer);
console.log('Timer stopped.');
}, 5000);
注意事项
- 任务重叠：如果前一次的任务没有完成而下一次的任务已经到了执行时间，这可能会导致任务重叠执行。为了避免这种情况，通常建议使用递归的
setTimeout()来代替setInterval()，这样可以确保每个新任务只会在上一个任务完成后开始。 - 浏览器性能优化：现代浏览器会对后台标签页中的定时器进行节流，这意味着当页面不在前台时，定时器的实际触发频率可能会低于设定的
delay时间。这种行为是为了节省系统资源并提高电池寿命。 - 精确度问题：由于JavaScript是单线程的，且事件循环的存在，
setInterval()的实际执行时间可能比设定的时间间隔更长，具体取决于当前事件队列的状态。
高级技巧：递归setTimeout代替setInterval
虽然setInterval()很方便，但在某些情况下，它可能不是最佳选择。因为如果前一次的任务没有完成，下一次任务就会开始，这可能导致问题。一种更好的做法是使用递归的setTimeout()，确保每次新的任务只会在上一个任务完成后才开始。
function customSetInterval(fn, time) {
let intervalId = null;
function loop() {
intervalId = setTimeout(() => {
fn();
loop();
}, time)
}
loop();
return () => clearTimeout(intervalId);
}
const interval = customSetInterval(function () {
console.log('123')
}, 1000)
setTimeout(() => {
interval();
}, 10500)
这段代码实现了一个自定义的 setInterval 功能，称为 customSetInterval。它使用了递归的 setTimeout 来模拟 setInterval 的行为，从而避免了原生 setInterval 可能导致的任务重叠问题，并提供了更精确的定时控制。下面我将逐步解释这段代码的工作原理。
代码分解
定义 customSetInterval
function customSetInterval(fn, time) {
let intervalId = null;
function loop() {
intervalId = setTimeout(() => {
fn(); // 执行传递进来的函数
loop(); // 递归调用自身以保持循环
}, time);
}
loop(); // 启动第一个延迟执行
return () => clearTimeout(intervalId); // 返回一个清除定时器的函数
}
- fn: 这是你想要周期性执行的函数。
- time: 这是每次执行之间的延迟时间（毫秒）。
- intervalId: 用于存储当前
setTimeout的 ID，以便稍后可以清除它。 - loop 函数: 这个内部函数负责创建一个新的
setTimeout，在指定的时间间隔后执行给定的函数fn并再次调用自己来维持循环。
使用 customSetInterval
const interval = customSetInterval(function () {
console.log('123');
}, 1000);
setTimeout(() => {
interval(); // 在10.5秒后停止定时器
}, 10500);
- 创建了一个名为
interval的常量，它保存了customSetInterval的返回值——一个用于清除定时器的函数。 - 每隔1秒（1000毫秒），
console.log('123')将被执行一次。 - 设置了一个额外的
setTimeout，它将在10.5秒后调用interval()函数来停止定时器。
优点
- 防止任务重叠：由于每次都是在前一个任务完成后才启动新的
setTimeout，所以即使某个任务耗时超过了设定的时间间隔，也不会导致任务重叠执行。 - 更精确的控制：这种方式能够更好地处理异步操作和长时间运行的任务，因为它确保了每个新任务只会在上一个任务完成后开始。
- 可取消：通过返回一个清除定时器的函数，可以让用户在需要的时候停止定时器。
注意事项
- 如果
fn内部有异常抛出且未被捕获，那么loop函数将不会继续执行，导致定时器提前结束。因此，在生产环境中，你可能需要添加错误处理逻辑。 - 这种方式下的定时器不会受到浏览器对后台标签页中定时器节流的影响，因为它是基于事件驱动的递归调用，而不是依赖于浏览器的定时器机制。
结语
定时器是JavaScript编程中不可或缺的一部分，掌握它们可以帮助我们编写出更加动态和响应式的Web应用程序。无论是简单的延迟执行，还是复杂的动画和交互逻辑，定时器都能助我们一臂之力。希望今天的分享能够帮助大家更好地理解并运用JavaScript定时器。
