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)