持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天，点击查看活动详情

计时器停止或动作不规律是打开多个浏览器选项卡时发生的常见问题。如果页面不活动，您的应用程序的计时器将停止，这通常会导致难以跟踪的错误。

这篇文章介绍了如何防止计时器由于 JavaScript 中的浏览器tab页面不活动而停止。让我们开始吧！

计时器停止原因

发生这种情况的原因是由于计时器节流。当应用程序的选项卡处于非活动状态时，大多数浏览器会限制选项卡活动以保护用户设备上的资源和电池寿命。

浏览器限制会影响计时器、音频、视频和其他 API。因此，如果将计时器函数设置为每秒运行，则在选项卡不活动时只能每隔几秒甚至几分钟运行一次。

那么如何解决它呢？需要对 Web Workers API有一定了解。

Web Workers API

Web Workers 允许您在与应用程序的主线程不同的线程上执行运行脚本操作。

即使您的应用程序的tab选项卡变为非活动状态，计时器也会继续倒计时。所有主流浏览器都支持 Web Worker，因此您不必担心兼容性问题。

在 Web Worker 中，您几乎可以运行任何 JavaScript 代码。但是API也有局限性，比如操作 DOM 或使用全局窗口对象的一些方法和属性。

这是 Web Worker 支持的所有 浏览器 API 的列表。

解决方案

为了解决这个问题，我们将使用一个名为 HackTimer 的小型库。HackTimer包含一些用于加载和运行 web worker 的 javascript 文件，这些文件将覆盖浏览器的计时器方法。

该脚本会覆盖setInterval、setTimeout和其他方法，以确保它们在后台运行，这反过来又会防止它们在选项卡变为非活动状态时受到限制。

使用HackTimer非常简单：

• 复制HackTimer.js并复制HackTimerWorker.js到您的项目中。
• 在项目中导入 HackTimer.js 脚本，如下所示：

import HackTimer from "./scripts/hacktimer/HackTimer";

HackTimer.js包含将自动调用的 IFFE 。IFFE 会让window自己使用 Web Worker 实现覆盖范围内的计时器功能。

导入脚本后，即使您的选项卡变为非活动状态，计时器仍将继续正常工作。

总结

在这篇文章中，我们介绍了如何防止计时器切换浏览器标签页而停止。我们研究了计时器停止的原因，以及Web Worker解决问题的思路。最后，我们看到了如何设置 HackTimer 来解决这个问题。