3

我有很多网站运行我的喊话框脚本，但这里有一个问题：

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

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

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

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

如果有一种方法可以让这个东西变得更智能，因为它可能会在用户断开连接或没有专注于网站窗口时停止刷新？

我正在寻找一种方法，仅当网站窗口聚焦且互联网连接处于活动状态时才将喊话框刷新。

谢谢您的帮助。

4

1 回答 1

2

在一次小型搜索中，我发现了这个javascript 实现，可以检测用户何时空闲或离开。

例子：

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;
}
于 2012-12-14T19:30:49.473 回答