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请求。

回答评论：

好的，但我认为问题的相关部分是如何这个图书馆工作，它检测到什么，我想解释这将是一个更有用的答案。如果我是OP，我想知道它是如何检测onIdle和onAway以及onBack的那些甚至与我的问题有关？ - jfriend00

jfriend00，它使用jQuery或原型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;
}

停止冗余刷新：JQuery

1 个答案:

回答评论：