javascript - 如何在更改选项卡(焦点)时暂停递归 setTimeout

Question

我的代码:

  let isBlack = true;
  function animate() {
    $(".someDiv").animate({
      backgroundColor: isBlack ? "transparent" : 'black'
    }, 20);
    isBlack = !isBlack;
  }

  const delay = ms => new Promise(res => setTimeout(res, ms));
  async function animateAndWait(msArr) {
    for (let i = 0; i < msArr.length; i++) {
      animate();
      await delay(msArr[i]);
    }
  }

  flashFunction();

  async function flashFunction() {
    await animateAndWait([300, 50]);
    if (myRandomNumberBetween(1, 100) <= 10) {
      return delay(3000)
        .then(flashFunction);
    }
    await animateAndWait([300, 400]);
      delay(3000)
        .then(flashFunction);
  }

它使一个 div 以大约 3 秒的间隔闪烁几次。我的问题发生在我切换标签页时。当我在另一个选项卡上时，该浏览器会暂停计时器，然后，当我返回此选项卡时，它会(快速地)闪烁所有在背景中错过的闪烁。

我想以某种方式在后台暂停计时器或清除间隔。有些人问过同样的问题，但我不能在这里包含对他们有帮助的答案。或者也许我只是不知道如何。这可能超出我的理解范围，但如果有人有空，我将不胜感激他们的帮助。

以下是有类似问题的人提供的一些链接:

recursive setTimeout() pause on background

Animations pause when browser tab is not visible

Answer 1

您可以使用 window.onblur/window.onfocus 事件在选项卡失去/恢复焦点时销毁/重新生成 Timeout。

let myTimeout;

window.onfocus = function() {
  console.log('focus')
  clearTimeout(myTimeout);
  myAction();
};

window.onblur = function(){
   console.log('blur')
   clearTimeout(myTimeout);
};

function myAction(){
  /* 
     your code ...
  */
  console.log('new cycle')
  myTimeout = setTimeout( myAction, 1000 );
}

myAction();

If you are looking for a timer capable of being paused/resumed take a look at this tiny library