我需要使用setTimeout或setInterval做某事,并且无法使其工作。

假设我有一个图片,当窗口完成渲染时加载,用户在20秒内保持闲置和/或做事,而在这20秒后,用户做出了某些操作(点击,移动或滚动)时,我想刷新图像,但是如果时间是20秒,并且用户闲置,我想继续计时直到用户进行交互,然后再清除值并重新开始观看。

情况:


图像加载,用户移动,保持空闲,单击(在20秒内完成所有操作),然后在这20秒后用户进行交互,因此图像刷新,setTimeout或setInterval清除并重新开始
图像加载,用户移动,保持空闲状态(在20秒钟内都处于空闲状态),然后在这20秒钟后用户保持空闲状态,因此图像不会刷新,并且setTimeout或setInterval保持计数,而不是清除等待用户进行重新启动的交互


无论如何,我无法采用这种方法。

我有这样的事情是行不通的:

var refresh = setTimeout(function(){
    console.log('Inside waiting for user interaction');
    //If user is idle while inside here keep waiting and counting

    $(document).on('mousemove click', function(){
        console.log('Inside because of user interaction');
        //Refresh image and then clearTimeOut
        clearTimeout(refresh);
        //Start again waiting for 20 seconds to get inside
        setTimeout(refresh);
    });
}, 20000); //20 seconds before waiting for user interaction


非常感谢!

最佳答案

有一个标志来指示计时器是否已经过去,并在处理鼠标活动时检查该标志。

var elapsed, timer;

function refresh() {
    //... stuff you want to do ...
    resetTimer();
}

function resetTimer() {
    if (!elapsed) {
        clearTimeout(timer);
    }
    elapsed = false;
    timer = setTimeout(function () {
        elapsed = true;
    }, 10000);
}

function mouseActivity() {
    if (elapsed) refresh();
}


演示小提琴:http://jsfiddle.net/7768nbze/

关于javascript - setTimeout内部有条件,然后再次运行,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30808168/

10-12 12:46
查看更多