在前端开发中，经常需要使用定时器来处理任务。然而，由于 JavaScript 的事件循环机制，定时器并不总是可靠的，尤其当浏览器窗口处于非活跃状态时，定时器可能会被暂停，导致一些意外情况发生。这时候，我们可以使用 npm 包 safe-timers 来解决这个问题。
安装
首先，安装 safe-timers：
npm install safe-timers
使用方法
导入
在使用之前，需要先导入 safe-timers：
const { SafeTimeout, SafeInterval } = require('safe-timers')
创建 SafeTimeout 对象
创建 SafeTimeout 对象的方法与原生的 setTimeout 函数类似：
const safeTimeout = new SafeTimeout(() => { console.log('safe timeout callback') }, 1000)
上面的代码会在 1 秒后执行回调函数，与原生定时器相比，它更加可靠，因为即使浏览器窗口处于非活跃状态，也会保证回调函数会被执行。
取消 SafeTimeout
如果需要取消 SafeTimeout，可以使用 clear 方法：
safeTimeout.clear()
创建 SafeInterval 对象
创建 SafeInterval 对象的方法与原生的 setInterval 函数类似：
const safeInterval = new SafeInterval(() => { console.log('safe interval callback') }, 1000)
上面的代码会每隔 1 秒执行一次回调函数。
取消 SafeInterval
如果需要取消 SafeInterval，可以使用 clear 方法：
safeInterval.clear()
实际应用
下面是一个实际的应用场景：在页面加载时，延迟 5 秒钟显示一个弹窗。在这个过程中，如果用户切换到了其他标签页或者最小化了浏览器窗口，那么弹窗的定时器可能会被暂停，导致用户无法及时看到弹窗。使用 safe-timers 可以解决这个问题。
假设我们已经有了一个弹窗组件：
-- -------------------- ---- ------- ----- ----- - ------------- - ------- - ----------------------------- ----------- ---------------------------------- - ------ - --------------------- - ------- - ------ - --------------------- - ------ - -展开代码
我们可以使用 SafeTimeout 对象来实现延迟显示弹窗的效果：
const popup = new Popup() const safeTimeout = new SafeTimeout(() => { popup.show() }, 5000)
上面的代码会在页面加载后延迟 5 秒钟显示弹窗，并且保证即使用户切换到其他标签页或者最小化浏览器窗口，弹窗也会被正确地显示出来。
总结
使用 safe-timers 可以帮助我们解决 JavaScript 定时器在非活跃状态下的问题，让定时器更加可靠。SafeTimeout 和 SafeInterval 对象的 API 与原生定时器函数类似，易于上手。在实际项目中，可以将其应用于延迟加载、定时刷新等场景中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/45132
