通过自我调节让 JavaScript 前端倒计时不再纠偏

前端网页倒计时是一个非常常见的应用，在各大购物网站的秒杀活动中总是能见到它的身影。但是在实际情况中，当网页不刷新、让倒计时程序持续运行时，显示时间相比实际时间会越来越慢，相信大家也有在秒杀时间即将到来时不停刷新页面的经历。原因自然也不难理解：倒计时通常使用定时器（如 JavaScript 的 setInterval() 函数）来实现，而这些定时器在实际运行时可能会受到各种因素的影响，例如系统负载、浏览器性能等，导致执行时间不稳定，从而导致倒计时纠偏。

为了解决这个问题，我们可以采用 JavaScript 前端倒计时自我调节的方法来实现纠偏。自我调节是指在倒计时程序运行时实时监测其与实际时间的差距，并根据差距对定时器的执行时间进行调整，从而使显示时间与实际时间保持一致。

下面是一个简单的 JavaScript 前端倒计时自我调节的实现示例：

function Countdown(targetTime, callback) {
  this.targetTime = targetTime;
  this.callback = callback;
  this.interval = null;
  this.startTime = null;
  this.elapsedTime = 0;
  this.lastExecutionTime = 0;
  this.drift = 0;
}

Countdown.prototype.start = function() {
  this.startTime = Date.now();
  this.interval = setInterval(this.tick.bind(this), 100);
};

Countdown.prototype.stop = function() {
  clearInterval(this.interval);
  this.interval = null;
};

Countdown.prototype.tick = function() {
  var now = Date.now();
  this.elapsedTime = now - this.startTime;
  var expectedElapsedTime = now - this.lastExecutionTime;
  this.drift += expectedElapsedTime - this.elapsedTime;
  var adjustedInterval = 100 + this.drift;
  this.lastExecutionTime = now;
  if (this.elapsedTime >= this.targetTime) {
    this.stop();
    this.callback();
  } else {
    setTimeout(this.tick.bind(this), adjustedInterval);
  }
};

这个示例中的 Countdown 类提供了一个可用于创建和管理倒计时的简单 API。targetTime 参数指定了倒计时目标时间（以毫秒为单位），callback 参数指定了在倒计时结束后要执行的回调函数。

start() 方法启动倒计时，stop() 方法停止倒计时。

tick() 方法是倒计时的核心逻辑。它计算从倒计时开始到现在所经过的时间（elapsedTime），以及从上一次执行 tick() 方法到现在所经过的时间（expectedElapsedTime）。然后，它计算出定时器的执行时间与实际时间的差异（drift），并根据差异调整定时器的执行时间（adjustedInterval）。最后，它检查倒计时是否已经结束，如果是，则停止倒计时并执行回调函数；如果不是，则继续运行定时器。

通过这种方式，我们可以让 JavaScript 前端倒计时即使在长时间运行后也能保持准确性。