javascript - 停止冗余刷新 : JQuery

Question

我有很多网站在运行我的 shoutbox 脚本，但这里有一个问题:

这个 shoutbox 每 10 秒刷新一次，考虑一下如果它发生在拥挤的网站上会怎样!

它有时会给一些用户带来 javascript 错误

$(document).ready(function(){
updateShoutbox();
var auto_refresh = setInterval(
function ()
{
updateShoutbox();
}, 10000);

改变时间段是一种选择，另一种是改善服务器资源。但我在这里有一个论点:

如果有一种方法可以让这个东西变聪明，因为它可以在用户断开连接或不关注网站窗口时停止刷新怎么办？

我正在寻找一种方法来将 shoutbox 刷新设置为仅在网站窗口获得焦点且互联网连接处于事件状态时才刷新。

感谢您的帮助。

Answer 1

在一个小小的搜索中，我找到了这个 javascript implementation检测用户何时空闲或离开。

例子:

var auto_refresh = null;
$(function(){

    setIdleTimeout(2000); // 2 seconds
    setAwayTimeout(4000); // 4 seconds

    document.onIdle = function() { /* something on idle if you want */ }
    document.onAway = function() { if(auto_refresh != null) clearInterval(auto_refresh); }
    document.onBack = function(isIdle, isAway) { auto_refresh = setInterval("updateShoutbox();", 10000); }

    updateShoutbox();
    document.onBack();
});

当用户离开时，您可以使用此实现停止发送 ajax 请求。

---

回复评论:

OK, but I thought the more relevant part to the question asked is how this library works and what it detects and I thought expounding upon that would make a more useful answer. If I was the OP, I'd want to know how does it detect onIdle and onAway and onBack and are those even relevant to my problem? – jfriend00

jfriend00，它跟踪文档中的交互事件，使用 jQuery 或原型(prototype) api:

function _initJQuery()
{
    _api = _API_JQUERY;
    var doc = $(document);
    doc.ready(function(){
            doc.mousemove(_active);
            try {
                doc.mouseenter(_active);
            } catch (err) { }
            try {
                doc.scroll(_active);
            } catch (err) { }
            try {
                doc.keydown(_active);
            } catch (err) { }
            try {
                doc.click(_active);
            } catch (err) { }
            try {
                doc.dblclick(_active);
            } catch (err) { }
        });
}

function _initPrototype()
{
    _api = _API_PROTOTYPE;
    var doc = $(document);
    Event.observe (window, 'load', function(event) {
        Event.observe(window, 'click', _active);
        Event.observe(window, 'mousemove', _active);
        Event.observe(window, 'mouseenter', _active);
        Event.observe(window, 'scroll', _active);
        Event.observe(window, 'keydown', _active);
        Event.observe(window, 'click', _active);
        Event.observe(window, 'dblclick', _active);
    });
}

// Detect the API
try {
    if (Prototype) _initPrototype();
} catch (err) { }

try {
    if (jQuery) _initJQuery();
} catch (err) { }

然后它使用超时来跟踪用户何时没有与页面交互，基本上，如果用户在超时执行之前进行交互，那么该函数将清除超时并重新启动它，因此仅在用户时执行不要与页面互动:

function setIdleTimeout(ms)
{
    _idleTimeout = ms;
    _idleTimestamp = new Date().getTime() + ms;
    if (_idleTimer != null) {
    clearTimeout (_idleTimer);
    }
    _idleTimer = setTimeout(_makeIdle, ms + 50);
    //console.log('idle in ' + ms + ', tid = ' + _idleTimer);
}

当用户返回时，它与页面交互，通过标志检测他离开或空闲，如果他离开则执行 onBack 并再次启动 setTimeout

function _active(event)
{
    var t = new Date().getTime();
    _idleTimestamp = t + _idleTimeout;
    _awayTimestamp = t + _awayTimeout;
    //console.log('not idle.');

    if (_idleNow) {
    setIdleTimeout(_idleTimeout);
    }

    if (_awayNow) {
    setAwayTimeout(_awayTimeout);
    }

    try {
    //console.log('** BACK **');
    if ((_idleNow || _awayNow) && document.onBack) document.onBack(_idleNow, _awayNow);
    } catch (err) {
    }

    _idleNow = false;
    _awayNow = false;
}