Запуск setTimeout только при активной вкладке

Есть ли способ остановить setTimeout("myfunction()",10000); от подсчета, когда страница не активна. Например,

  • Пользователь приходит к "некоторой странице" и остается там в течение 2000 мс
  • Пользователь переходит на другую вкладку, открывая "какую-то страницу".
  • myfunction() не срабатывает, пока они не вернутся на другие 8000 мс.

Ответы

Ответ 1

(function() {
  var time = 10000,
      delta = 100,
      tid;

  tid = setInterval(function() {
    if ( document.hidden ) { return; }    
    time -= delta;
    if ( time <= 0 ) {
      clearInterval(tid);
      myFunction(); // time passed - do your work
    }        
  }, delta);
})();

Демонстрационная версия: https://jsbin.com/xaxodaw/quiet

Changelog:

  • 9 июня 2019 года. Я перешел на использование document.hidden чтобы определить, когда страница не видна.

Ответ 2

Отличный ответ от Šime Vidas, это помогло мне с моей собственной кодировкой. Для полноты я сделал пример, если вы хотите использовать setTimeout вместо setInterval:

(function() {

    function myFunction() {
        if(window.blurred) {
            setTimeout(myFunction, 100);
            return;
        }

        // What you normally want to happen

        setTimeout(myFunction, 10000);
    };
    setTimeout(myFunction, 10000);

    window.onblur = function() {window.blurred = true;};
    window.onfocus = function() {window.blurred = false;};

})();

Вы увидите, что проверка размытого окна имеет более короткое время, чем обычно, поэтому вы можете установить это в зависимости от того, как скоро вам потребуется, чтобы остальная часть функции запускалась, когда окно восстанавливает фокус.

Ответ 3

Вы можете сделать что-то вроде:

$([window, document]).blur(function(){
        // Clear timeout here
}).focus(function(){
        // start timeout back up here
});

Окно для IE, документ для остальной части мира браузера.

Ответ 4

Что вам нужно сделать, так это настроить механизм для установки таймаутов с небольшими интервалами, отслеживая общее время прошедшего времени. Вы также будете отслеживать "mouseenter" и "mouseleave" на всей странице (<body> или что-то еще). Когда истекают кратковременные таймауты, они могут проверять состояние окна (в или из) и не перезапускать процесс, когда окно не находится в фокусе. Обработчик "mouseenter" запускает все приостановленные таймеры.

edit — @Šime Vidas опубликовал отличный пример.

Ответ 5

Я использую почти тот же подход, что и Шиме Видас, в моем слайдере, но мой код основан на document.visibilityState для проверки видимости страницы:

var interval = 4000;

function slideshow() {
  // slideshow code
};

$(document).ready(function() {

var switchInterval;

function intervalHandler() {
  switchInterval = setInterval(function() {
    if (document.visibilityState === "visible") {
      slideshow();
    } else {
      return;
    }
  }, interval);
}

intervalHandler();

});