Javascript setTimeout（）在hasFocus（）内时不工作

下面的代码在用户进入页面30秒后发送

30s

事件进行谷歌分析

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

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

我真正想要的是，当用户最小化页面时，可以“暂停”设置超时，当用户最大化页面时，

setTimeout

从停止时开始继续计数

我试图将

setTimeout

放入

hasFocus

语句中，但它没有按预期工作

有什么方法可以做到这一点吗？

您可以使用来检测页面焦点何时丢失。隐藏时，清除现有超时，并将剩余时间设置为变量；显示时，用剩余时间设置一个

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();
  }
});

您可以使用来检测页面焦点何时丢失。隐藏时，清除现有超时，并将剩余时间设置为变量；显示时，用剩余时间设置一个

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();
  }
});

---

您可以使用document.hidden：

---

setInterval（（）=>console.log（document.hidden），1000）

您可以使用document.hidden：

setInterval（（）=>console.log（document.hidden），1000）