1

div にページをロードし、4 秒ごとに更新する小さな jQuery チャットボックスを作成しました。

クリックすると、下にスライドし、ページを div にロードして更新します。

$('#toggle').click( function () { 
    $('#sbox').slideDown('fast');
    var refreshId = setInterval(function() {
        $('#shout').load('shout.php?randval='+ Math.random());
    }, 4000);
    return false;
});

ただし、これは少しリソースを浪費していると思いますので、アクティビティが検出されない場合はx分後に更新を停止し、アクティビティが再び発生したら更新を再開することを考えてみてください...

私はこのスニペットを見つけました... https://stackoverflow.com/a/7026769/1359310 ...アクティビティ（マウスの動き）をチェックし、私のニーズには完璧に見えますが、2つを組み合わせることができないようです.

要約すると、div の読み込みページをクリックして更新を開始します。アクティビティが更新を停止しない場合は x 分後に、アクティビティが再び検出されたら、再び更新を開始します。

4

2 に答える 2

1 
// If theres no activity for 2 minutes do something
var isActive = true;
var isRefreshing = false;
var refreshChatboxWait = 4000;
var activityTimoutWait = 120000;
var activityTimeout = setTimeout(inactive, activityTimoutWait);

function resetActive(){
    isActive = true;
    clearTimeout(activityTimeout);
    if ( ! isRefreshing ) {
        var refreshId = setInterval(refreshChatbox, refreshChatboxWait);
    }
    activityTimeout = setTimeout(inactive, activityTimoutWait);
}

// No activity do something.
function inactive(){
    isActive = false;
}

function refreshChatbox(){
    $('#shout').load('shout.php?randval='+ Math.random());
    if ( ! isActive ) {
        clearInterval(refreshId);
    }
}

// Check for mousemove, could add other events here such as checking for key presses ect.
$(document).bind('mousemove', function(){resetActive()});

$('#toggle').click( function () { 
    $('#sbox').slideDown('fast');
    if ( ! isRefreshing ) {
        var refreshId = setInterval(refreshChatbox, refreshChatboxWait);
    }
    return false;
});

それを試してみてください。:)

于 2012-05-09T02:48:47.283 に答える
1

このような何かがそれを行う必要があります。ニーズに合わせて調整できるはずです。私は基本的に、あなたがリンクしたSOの質問からコードをコピーしました。これにより、本体にアクティブ/非アクティブ クラスが追加されます。私のコードを実行すると、これが表示されます。ページがアクティブな場合、画面は青色です。これは、リフレッシュが行われることを示します。画面が灰色の場合は、リフレッシュする必要はありません。

次に、コードにアクティブ/非アクティブ クラスのチェックを入れるだけです。

http://jsfiddle.net/scgEs/1

var refreshrate = 4000;
var inactivitytime = 15000;
var refreshid; //set to global scope so that you can clear it later
var activityTimeoutId; //store timeout for inactivity
$('#sbox').slideUp();

$('#toggle').click(function() {
    $('#sbox').slideDown('fast');
    refreshId = setInterval(function() {
        if ($('body.inactive').length == 1) {
            $('#sbox').append('<div>No refresh</div>');
        }
        else {
            console.log('Refreshing data');
            $('#sbox').append('<div>Refreshed...</div>');
            //$('#shout').load('shout.php?randval=' + Math.random());
        }
    }, refreshrate);
    return false;
});

// If theres no activity for X seconds do something
activityTimeoutId = setTimeout(inActive, inactivitytime);

function resetActive() {
    $(document.body).attr('class', 'active');
    clearTimeout(activityTimeoutId);
    activityTimeoutId = setTimeout(inActive, inactivitytime);
}

// No activity do something.


function inActive() {
    $(document.body).attr('class', 'inactive');
}

// Check for mousemove, could add other events here such as checking for key presses ect.
$(document).bind('mousemove', function() {
    resetActive()
});​
于 2012-05-09T02:49:08.413 に答える