js 重复定时器

在JavaScript中，重复定时器通常是指setInterval函数，它可以按照指定的时间间隔重复执行一段代码。与之相对的是setTimeout，它只执行一次。

基础概念:

• setInterval(callback, delay): 这个函数接受两个参数，一个是回调函数callback，另一个是时间间隔delay（以毫秒为单位）。setInterval会每隔delay毫秒重复执行一次callback函数，直到clearInterval被调用或窗口被关闭。

优势:

• 可以用来处理需要定期更新的任务，如轮询服务器数据、动画效果、定时提醒等。

类型:

• JavaScript中的定时器主要有两种：setTimeout和setInterval。

应用场景:

• 实时更新数据：比如股票行情、社交媒体更新。
• 动画效果：如滚动图片轮播。
• 定时任务：如定时发送请求检查新邮件。

遇到的问题及解决方法:

1. 定时器累积：如果callback函数执行时间过长，可能会导致定时器堆积，即前一个定时器还未执行完毕，下一个定时器已经开始计时。解决方法是确保callback函数执行时间尽可能短，或者在函数开始时清除之前的定时器，使用setTimeout递归调用来模拟setInterval。

let intervalId;
function myCallback() {
  // ...执行任务...
  intervalId = setTimeout(myCallback, delay);
}
myCallback(); // 启动定时器

// 如果需要停止定时器
clearTimeout(intervalId);

1. 内存泄漏：如果定时器没有被正确清除，可能会导致内存泄漏。解决方法是确保在不需要定时器时调用clearInterval或clearTimeout来清除定时器。
2. 时间间隔不准确：由于JavaScript是单线程的，如果主线程被其他任务占用，定时器的执行可能会被延迟。解决方法是尽量减少主线程的负担，或者使用requestAnimationFrame来实现更平滑的动画效果。

示例代码:

// 使用setInterval每秒打印一次当前时间
const intervalId = setInterval(() => {
  console.log(new Date().toLocaleTimeString());
}, 1000);

// 5秒后停止定时器
setTimeout(() => {
  clearInterval(intervalId);
  console.log('定时器已停止');
}, 5000);

在上面的示例中，我们设置了一个每秒打印当前时间的定时器，并在5秒后停止它。如果需要在特定条件下停止定时器，可以在callback函数内部添加相应的逻辑来调用clearInterval。