Question

我的代码：

QMenu

它使div以〜3秒的间隔闪烁两次。切换标签时会发生我的问题。当我在另一个选项卡上时，该浏览器会暂停计时器，然后，当我返回此选项卡时，它将使所有在后台丢失的闪烁（快速）闪烁。

我想以某种方式在后台暂停计时器或清除间隔。有些人也提出了同样的问题，但我无法在此纳入对他们有帮助的答案。也许我只是不知道该怎么做。这可能完全在我头上，但是如果有人有一些时间在手，我将感谢他们的帮助。

这里有一些类似问题的人的链接：

recursive setTimeout() pause on background

Animations pause when browser tab is not visible

Answer 1

当选项卡失去/恢复焦点时，您可以使用window.onblur / window.onfocus事件破坏/重新生成超时。

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

如果您正在寻找一个可以暂停/恢复的计时器，请查看此tiny library

Answer 2

如果像我这样的初学者想知道如何将我的代码与colxi对我的问题的答案结合起来，那就是：

   let myTimeout;
   let isBlack = true;


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

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

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

    function myAction(){

      const delay = ms => new Promise(res => myTimeout = setTimeout(res, ms)); // some changes here

      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);
      }
      console.log('new cycle') 
    }

    myAction();

但是我不知道它是否最佳。尽管如此，它仍然有效！

更改标签页（焦点）时如何暂停递归setTimeout

2 个答案: