Как я могу приостановить рекурсивный setTimeout, пока я меняю вкладку (фокус) - PullRequest
Новая
       35

Как я могу приостановить рекурсивный setTimeout, пока я меняю вкладку (фокус)

0 голосов
/ 03 октября 2018

Мой код: 

  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() пауза на фоне

Анимация останавливается, когда вкладка браузера не видна

Ответы [ 2 ]

0 голосов
/ 09 октября 2018

Если такой начинающий, как я, захочет узнать, как я объединил свой код с ответом Колкси на мой вопрос, вот он: 

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

Однако я понятия не имею, является ли он оптимальным или нет.Тем не менее это работает!

0 голосов
/ 08 октября 2018

Вы можете использовать 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();

Если вы ищете таймер, который можно приостановить/ возобновил взглянуть на эту крошечную библиотеку

...