Question

我需要每隔5分钟不断获取新数据，但前提是用户在页面上处于活动状态。

到目前为止，这是我的进步/想法：

加载文档时，获取数据并使用setTimeout方法基本上将函数休眠5分钟。

5分钟后，该功能将运行，但只有当用户将鼠标悬停在页面的某个部分时才会更新数据。

setTimeout(getData, 10000) // Shortened time for testing purposes
function getData(){
    $('#feed').mouseover(function(){
        $('#feed').fadeOut();
        Get the feed
        setTimeout(getData, 10000);
    });
}

有更好的方法吗？

Answer 1

可能有更好的方法，但对于此示例，您需要unbind .mouseover，如此：

setTimeout(getData, 10000) // Shortened time for testing purposes
function getData(){
    $('#feed').mouseover(function(){
        $('#feed').fadeOut();
        Get the feed
        $(this).unbind('mouseover');
        setTimeout(getData, 10000);
    });
}

否则，事件仍将被绑定，无论超时如何，您都将继续调用Feed

Answer 2

根据@ Jacob的回答，你可以使用一个标志，一段时间后，将其设置为false。您可以保留在后台运行数据的函数并检查该标志：

var active = true;
var current_timeout = null;

function idle() {
    active = false;
    current_timeout = null; 
}


$('#feed').mousemove(function(){ 
    // maybe another event that does not 
    // constantly fire (but often enough) is enough

    active = true;
    if(current_timeout !== null) {
        window.clearTimeout(current_timeout);
    }
    timeout = window.setTimeout(idle, 180000); // mark not active after 3 minutes
});

window.setInterval(function() {
    if(active) {
        //get data
    }
), 300000);

虽然用户不在页面上，但我不确定是否没有必要让间隔运行（尽管只要active为假就不会做任何事情）。你必须测试它。

仅在事件处理程序触发后运行函数

2 个答案: