3

shoutboxスクリプトを実行しているWebサイトがたくさんありますが、ここに問題があります。

このシャウトボックスは10秒ごとに更新され、混雑したWebサイトで発生した場合はどうなるかを検討してください。

一部のユーザーにjavascriptエラーが発生することがあります

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

期間の変更は1つのオプションであり、もう1つはサーバーリソースの改善です。しかし、私はここに論文を持っています：

ユーザーが切断されているか、Webサイトのウィンドウに集中していないときに更新が停止する可能性があるため、これをスマートにする方法がある場合はどうなりますか？

ウェブサイトのウィンドウにフォーカスがあり、インターネット接続が有効な場合にのみ、シャウトボックスの更新を調整する方法を探しています。

助けてくれてありがとう。

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リクエストの送信を停止できます。

コメントに答える：

OKですが、尋ねられた質問に関連する部分は、このライブラリがどのように機能し、何を検出するかであると思いました。それについて詳しく説明すると、より有用な答えになると思いました。私が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 に答える