页面不活跃状态时 setTimeout不执行

当页面处于不活跃状态时（例如，用户切换到了另一个标签页或最小化了浏览器窗口），浏览器会对定时器进行限制，以减少不必要的计算和电池消耗。这可能导致setTimeout的回调函数延迟执行或完全停止执行。

为了解决这个问题，你可以使用Web Workers来执行定时任务，因为Web Workers在后台运行，并不受页面活跃状态的影响。下面是使用Web Workers解决setTimeout不执行的示例代码：

1. 创建一个新的JavaScript文件，例如worker.js，并编写以下代码：

// worker.js

// 定时器回调函数
function timerCallback() {
  // 在此处编写你的定时任务逻辑
}

// 响应消息事件
self.addEventListener('message', function (e) {
  // 接收到主线程的消息后，执行定时器回调函数
  timerCallback();
});

2. 在主线程的JavaScript文件中，使用以下代码创建并启动Web Worker：

// 主线程的JavaScript文件

// 创建Web Worker
var worker = new Worker('worker.js');

// Web Worker消息事件处理程序
worker.onmessage = function (e) {
  // 在此处处理Web Worker的响应消息
};

// 启动定时器
function startTimer() {
  // 发送消息给Web Worker，触发定时器回调函数
  worker.postMessage('start');
}

// 停止定时器
function stopTimer() {
  // 发送消息给Web Worker，停止定时器回调函数
  worker.postMessage('stop');
}

3. 在主线程的JavaScript代码中，使用startTimer函数来启动定时器，使用stopTimer函数来停止定时器。

通过这种方式，你可以确保定时器任务在Web Worker中运行，独立于页面的活跃状态。当页面不活跃时，定时器仍然会按预期执行。