Как узнать, читается ли страница в данный момент пользователем с помощью Javascript?

Question

Я делаю веб-страницу с динамическим контентом, который входит в представление с помощью опроса AJAX. Страница JS иногда загружает обновленную информацию и отображает ее на странице, пока пользователь читает другую информацию. Такие вещи являются дорогостоящими для пропускной способности и времени обработки. Я хотел бы сделать паузу при опросе, когда страница не просматривается.

Я заметил, что большинство открытых мной веб-страниц проводят большую часть своего времени в миниатюре или на вкладке без просмотра. Я хотел бы иметь возможность приостановить выполнение сценариев до тех пор, пока страница фактически не будет просмотрена.

Я понятия не имею, как это сделать, и, похоже, он пытается вырваться из песочницы HTML DOM и проникнуть в систему пользователя. Это может быть невозможно, если движок JS не знает о своей среде рендеринга. Я никогда не видел, чтобы другой сайт делал это (не то, что пользователь намерен это видеть ...)

Так что это интересный вопрос для обсуждения, я думаю. Как бы вы написали веб-приложение, которое загружало бы процессор, если не использовалось? Предоставление пользователю кнопки паузы ненадежно, я бы хотел, чтобы она была автоматической.

Answer 1

Ваше лучшее решение будет примерно таким:

 var inactiveTimer;
 var active = true;
 function setTimer(){
  inactiveTimer = setTimeOut("stopAjaxUpdateFunction()", 120000); //120 seconds
 }
 setTimer();
 document.onmouseover = function() { clearTimeout ( inactiveTimer ); 
                                     setTimer(); 
                                     resumeAjaxUpdate();
  }; //clear the timer and reset it.
 function stopAjaxUpdateFunction(){
  //Turn off AJAX update
  active = false;   
 }
 function resumeAjaxUpdate(){
  if(active == false){
   //Turn on AJAX update
   active = true;
  }else{
   //do nothing since we are still active and the AJAX update is still on.
  }    
 }

Функция stopAjaxUpdate должна остановить процесс обновления AJAX.

Answer 2

Как насчет установки «таймаута неактивности», который сбрасывается при каждом получении события мыши или клавиатуры в DOM? Я полагаю, что именно так большинство программ обмена мгновенными сообщениями решают, что вы «отсутствовали» (хотя они делают это, перехватывая входные сообщения на уровне всей системы)

Answer 3

Первая проверка, когда окно теряет фокус и получает его.

window.onblur = function () { /* stop */ };
window.onfocus =  function () { /* start */ };

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

Answer 4

Я уже рассматривал эту проблему для исследовательского проекта. В то время (2-3 года назад) я не нашел способа получить информацию из браузера о том, свернуты ли вы или нет: (

Answer 5

Я знаю, что вы уже приняли ответ, но я лично использовал бы комбинацию нескольких ответов, упомянутых здесь, по разным причинам, включая:

• Использование событий мыши только отталкивает пользователей, хорошо разбирающихся в просмотре с клавиатуры.
• Использование событий размытия / фокусировки не позволяет пользователям, которые делают чашку чая; -)

Скорее всего, я бы использовал что-то вроде следующего:

var idleTimer, userIsIdle, pollingTimer;
document.onkeydown = document.onmousemove = resetTimer;

window.onload = function () {
    pollingTimer = window.setTimeout(runPollingFunction, 30000);
    resetTimer();

    /* IE's onblur/onfocus is buggy */ 
    if (window.navigator.appName == "Microsoft Internet Explorer")
        document.onfocusin  = resetTimer,
        document.onfocusout = setIdle;
    else
        window.onfocus = resetTimer,
        window.onblur = setIdle;
}
function resetTimer() {
    if (userIsIdle)
        setBack();

    window.clearTimeout(idleTimer);
    idleTimer = window.setTimeout(setIdle, 120000); // 2 minutes of no activity    
}
function setIdle() {
    userIsIdle = true;
    window.clearTimeout(pollingTimer); // Clear the timer that initiates polling
    window.clearTimeout(setIdle);
}
function setBack() {
    userIsIdle = false;
    runPollingFunction(); // call the polling function to instantly update page
    pollingTimer = window.setTimeout(runPollingFunction, 300000);
}

Answer 6

Вы можете прослушивать события мыши и нажатия клавиш. Если один из них был запущен в течение последних X секунд, продолжайте обновление. В противном случае не обновлять.

Это не идеально, но я думаю, что это лучшее, что вы можете сделать с чистым JS.

Если вы хотите окунуться в мир Flash, Silverlight или Java, вы можете получить больше информации из браузера.