setTimeout() 在 hasFocus() 内部时不起作用

Question

下面的代码在30s用户进入页面 30 秒后发送 Google Analytics 事件。

setTimeout(function(){
   gtag('event', '30s');
}, 30000);

但是当用户最小化窗口时，该事件仍然会触发。

我真正想要的是一种在用户最小化页面时“暂停”的方法setTimeout，并且当用户最大化页面时，setTimeout从停止的那一刻起继续计数。

我试图将声明放入setTimeout其中hasFocus，但它没有按预期工作。

有办法做到吗？

Answer 1

您可以使用页面可见性 API来检测页面焦点何时丢失。隐藏时，清除现有超时，并将剩余时间设置为变量；显示时，设置setTimeout剩余时间。大致如下：let run = false;const fn = () => {  gtag('event', '30s');  run = true;};let timeoutId;let runAt;let timeLeft = 30_000;const resume = () => {  runAt = Date.now() + timeLeft;  timeoutId = setTimeout(fn, timeLeft);};resume();document.addEventListener('visibilitychange', () => {  if (document.hidden) {    timeLeft = runAt - timeLeft;    clearTimeout(timeoutId);  } else if (!run) {    resume();  }});

Answer 2

您可以使用 document.hidden：setInterval(() => console.log(document.hidden), 1000)