Сбросить JS таймер, когда окно выходит из фокуса

Question

Я долго крутил себе голову из-за этого и, кажется, не могу заставить его работать.

В основном пытаюсь сбросить таймер, когда окно выходит из фокуса более 30 секунд.

Буду благодарен за любое работающее решение.

С уважением, Уилл.

window.onData = function(data) {
        if (data.setDisplay == true) {
            
            $("#container").css('display', 'flex');
            $("body").fadeIn(1000);
            var counter = 90;
    var c = 90;
    var i = setInterval(function(){
    
        $(".loading-page .counter h1").html("YOU HAVE " + c + " SECONDS LEFT UNTIL RESPAWN");
        $(".loading-page .counter hr").css("width", c + "");
      counter--;
      c--;
        
      if(counter == 0) {
        
        $(".loading-page .counter h1").html("YOU MAY DO /RESPAWN");
        $(".loading-page .counter p").html("DON'T FORGET THE NEW LIFE RULE!");
         clearInterval(i);
      }
    }, 1000);
        } else {
            $("#container").css('display', 'none');
            $("body").css('display', 'none');

        }
        
    }


    window.onload = function(e) {
        window.addEventListener('message', function(event) {
            onData(event.data)
        });
    }

Answer 1

Возможно, вы имеете в виду это?

Не тестировалось, но у него достаточно фрагментов, которые можно перемещать

const onData = function(data) {
  if (data.setDisplay == true) {
    $("#container").css('display', 'flex');
    $("body").fadeIn(1000);
    
    let tId = setInterval(function() {
      $(".loading-page .counter h1").html("YOU HAVE " + counter + " SECONDS LEFT UNTIL RESPAWN");
      $(".loading-page .counter hr").css("width", counter);
      counter--;
      if (counter == 0) {
        $(".loading-page .counter h1").html("YOU MAY DO /RESPAWN");
        $(".loading-page .counter p").html("DON'T FORGET THE NEW LIFE RULE!");
        clearInterval(tId);
      }
      localStorage.setItem("counter",counter);
    }, 1000);
  } else {
    $("#container").hide()
    $("body").hide()
  }
}

let counter;
const getCounter = function() {
  counter = localStorage.getItem("counter");
  counter = counter === null ? 90 : +counter; // continue from where it was
  const now = new Date().getTime()
  const blurred = sessionStorage.getItem("blurred");
  blurred = blurred ? +blurred : 0;
  if (blurred && (now-blurred)/1000) >30) counter = 0;
};
$(function() {
  $(window).on('message', function(event) {
    onData(event.data)
  });
  $(window).on("blur",function() {
     sessionStorage.setItem("blurred",new Date().getTime())
  })
});
$(window).on("focus",getCounter )