即使浏览器在后台运行，如何使 Javascript Timeout 功能运行？答案

【问题标题】：How to make Javascript Timeout function run even when browser is running in background?即使浏览器在后台运行，如何使 Javascript Timeout 功能运行？
【发布时间】：2021-04-16 08:01:45
【问题描述】：

我尝试在 vanilla JavaScript 的帮助下制作一个计时器，并使用超时函数每毫秒更新一次计时器，但在启动它之后，如果我切换到当前浏览器以外的另一个应用程序，超时函数将停止执行它。如果我离开窗口焦点 8 秒，然后几秒后我回到浏览器，计时器从 8 秒开始。我希望它甚至在后台连续运行。

我也认为这可能会有所帮助，但我不知道如何实现 - https://www.w3schools.com/js/js_api_web_workers.asp

【问题讨论】：

使用日期对象来跟踪时间......永远不要依赖计时器来计时。

标签： javascript html function timer timeout

【解决方案1】：

是的，所有现代浏览器在设计上都不允许 JS 执行，如果选项卡没有聚焦，这是出于优化目的而设计的。

您可以使用工作人员让代码即使选项卡失去焦点仍然可以运行，但不允许工作人员访问 DOM，因此您无法在页面上进行任何可见的更新。

这是一个简单的例子： index.html

<!DOCTYPE html>
<html>
<body>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>

<script>
let w;

function startWorker() {
  if (typeof(Worker) !== "undefined") {
    if (typeof(w) == "undefined") {
      w = new Worker("webWorker.js");
    } 
  }  
}

function stopWorker() {
  w.terminate();
  w = undefined;
}
</script>

</body>
</html>

webWorker.js

let max = 0 

let consoleLogWorker = () => {
  console.log("background log")
  max+= 1
  if(max < 50) setTimeout("consoleLogWorker()",500);
 
}

consoleLogWorker();

如果您运行上面的示例，您将在启动工作程序时看到，即使您离开启动工作程序的页面，它仍然会在控制台中打印。

但是你不能直接访问 web worker 中的 DOM。

您应该尝试使用 Via.js，它可以让您访问工作人员“内部”的 DOM，在过去这不是一个可行的解决方案，因为它会造成内存泄漏，但启用了 WeakRefs在 Chrome 84+ 中默认情况下，因此它不应在较新的浏览器上造成内存泄漏。

我用 via 创建了一个 chrome 扩展程序，它在后台设置计时器，然后使用 web Worker 更改网站的图标这里是源 https://gitlab.flashsoft.eu/chrome-extensions/tab-timer-alert 也许它会帮助你。

【讨论】：