x分钟后jquery停止/启动div刷新

Question

我编写了一个小的 jQuery 聊天框，它在 div 中加载一个页面并每 4 秒刷新一次：

点击向下滑动并在 div 中加载页面并刷新：

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

不过，我猜这有点消耗资源，所以想想如果在 x 分钟后没有检测到活动，则停止刷新，但一旦再次有活动继续刷新......

我找到了这个 sn-p ... https://stackoverflow.com/a/7026769/1359310 ...它检查活动（鼠标移动）并且看起来非常适合我的需求，但似乎无法将两者结合起来。

总结一下我所追求的是在div中单击加载页面并开始刷新，x分钟后如果没有活动停止刷新，一旦再次检测到活动再次开始刷新。

Answer 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()
});​

Answer 2

// 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;
});

试试看。 :)