剖析setInterval定时器封装，探寻代码抽离与浏览器切换影响

前端

2023-11-03 20:33:17

揭开计时序幕：setInterval的运转机制

计时器作为JavaScript的重要组成部分，为开发者提供了精确控制时间流逝的方法。setInterval是浏览器内置的一个计时器API，可周期性地执行指定代码，它的工作方式如下：

初始化： 当您使用setInterval(function, milliseconds)方法时，JavaScript引擎会创建一个定时器对象，其中包含需要执行的函数及其执行间隔（以毫秒为单位）。
计时： 定时器对象启动计时，并在达到指定的时间间隔后执行回调函数。
重复： 如果没有清除计时器，它将继续以相同的间隔重复执行回调函数，直到明确停止。

setInterval的运作原理很简单，但它却在许多复杂的Web应用中发挥着至关重要的作用，例如：

创建动画效果
轮询服务器获取实时数据
定期保存用户输入
构建倒计时或计时器功能

抽丝剥茧：代码抽离的精妙之处

在大型应用中，保持代码的可维护性和可扩展性至关重要。代码抽离是一种将通用或重复性代码从主代码块中分离出来并创建独立模块或函数的技术，它具有许多优势：

提高可读性和可维护性： 代码抽离可以使代码更易于阅读和理解，因为它将复杂的功能或逻辑组织成更小的、独立的模块。这使得修改和维护代码变得更加容易。
提高可重用性： 抽离出的代码可以在应用程序的不同部分重用，避免重复编写相同的逻辑，从而节省时间并减少错误的风险。
增强模块化和可扩展性： 代码抽离可以将应用程序分解为更小的模块，使应用程序更易于扩展和维护。当需要添加新功能或修改现有功能时，您只需要更新相应的模块，而无需触及整个应用程序。

细致入微：封装setInterval定时器的精髓

在实际开发中，我们经常需要在多个地方使用setInterval定时器，这时就可以利用代码抽离的技巧，将setInterval的封装抽象为一个独立的函数，例如：

function setTimer(callback, delay) {
  return setInterval(callback, delay);
}

这个函数接受两个参数：需要执行的回调函数callback和执行间隔delay。当调用setTimer(callback, delay)时，它将创建并启动一个定时器，并返回该定时器的ID。

使用这个封装函数，我们就可以在应用程序的不同部分轻松使用setInterval定时器，而无需每次都重复编写代码。例如：

const timerId = setTimer(() => {
  console.log("Hello world!");
}, 1000);

柳暗花明：巧妙应对浏览器切换的影响

浏览器切换是指用户在同一台设备上打开多个浏览器窗口或标签页。当浏览器切换时，后台页面的定时器可能会受到影响，甚至停止执行。这是因为浏览器会暂停后台页面的执行以节省资源，而当用户切换回该页面时，定时器才会继续执行。

为了解决这个问题，我们可以使用requestAnimationFrame()方法来代替setInterval。requestAnimationFrame()是一个浏览器API，它可以确保在浏览器渲染每一帧之前执行指定的函数。这意味着，即使在浏览器切换的情况下，requestAnimationFrame()也会在用户切换回页面时继续执行。

将setInterval定时器替换为requestAnimationFrame()：

function setTimer(callback, delay) {
  let start = 0;
  return requestAnimationFrame(function animate(time) {
    if (!start) {
      start = time;
    } else if (time - start >= delay) {
      callback();
      start = time;
    }
    requestAnimationFrame(animate);
  });
}

这个封装函数使用requestAnimationFrame()来执行回调函数，并确保在每次浏览器渲染时都检查是否达到指定的延迟。如果达到延迟，它将执行回调函数并重置计时器。

使用这个封装函数，我们就可以确保定时器即使在浏览器切换的情况下也能稳定运行。

锦上添花：优化代码的点睛之笔

除了使用requestAnimationFrame()来解决浏览器切换的问题外，我们还可以通过以下技巧进一步优化代码：

避免在定时器回调函数中执行耗时操作。 耗时操作可能会导致定时器执行不连贯或延迟。如果必须在定时器回调函数中执行耗时操作，请考虑使用setTimeout()方法来延迟执行。
在不需要定时器时清除它。 当定时器不再需要时，请使用clearInterval()或cancelAnimationFrame()方法清除它，以释放资源并防止不必要的执行。
使用合理的延迟时间。 延迟时间应根据实际需求来设置。过短的延迟时间可能会导致定时器执行过于频繁，浪费资源；过长的延迟时间则可能会导致定时器执行不连贯。