Question

我正在创建一个包含动态内容的网页，该网页通过AJAX轮询进入视图。页面JS偶尔会下载更新的信息，并在用户阅读其他信息时将其呈现在页面上。这种事情对带宽和处理时间来说代价很高。我希望在没有查看页面时暂停轮询。

我注意到我打开的大多数网页都将大部分时间花在了最小化的时间或未查看的标签中。我希望能够暂停脚本，直到实际查看页面为止。

我不知道该怎么做，它似乎试图突破html DOM的沙箱并进入用户的系统。如果JS引擎不了解其渲染环境，则可能是不可能的。我从来没有见过不同的网站这样做（不是用户打算看到它......）

因此，我认为这是一个有趣的讨论问题。您如何编写一个CPU重的Web应用程序，以便在不使用时暂停？给用户一个暂停按钮是不可靠的，我希望它是自动的。

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.
  }    
 }

stopAjaxUpdateFunction应该停止AJAX更新进度。

Answer 2

设置每次在DOM中收到鼠标或键盘事件时重置的“不活动超时”怎么样？我相信这就是大多数IM程序决定你“离开”的方式（虽然他们通过在系统级别挂钩输入消息来实现）

Answer 3

在研究项目之前，我已经研究过这个问题了。当时（2 - 3年前），我没有找到从浏览器获取有关您是否被最小化的信息的方法：（

Answer 4

首先检查窗口何时失去并获得焦点。

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

此外，由于各种原因，用户可能会停止阅读该页面而不会使其失去焦点（例如，他起身并离开计算机）。在这种情况下，您必须假设在一段时间不活动（没有鼠标或键盘事件）后，用户的注意力已离开页面。执行此操作的代码在另一个答案中描述。

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

您可以收听mousemove和keypress事件。如果其中一个在过去X秒内被触发，则继续进行更新。否则，请勿更新。

这并不完美，但我认为这是纯粹的JS所能做到的。

如果您想进入Flash，Silverlight或Java世界，您可以从浏览器中获取更多信息。

如何知道用户当前是否正在使用Javascript读取页面？

6 个答案: