如何等待一定时间间隔，然后检查用户 activity 并触发代码并再次开始等待？

Question

在页面加载时，我们应该等待 15 秒，然后开始以鼠标移动的形式检查用户 activity。如果有用户 activity，触发代码并再次开始等待用户 activity 15 秒。

我最好的照片在下面。我设置了一个间隔，允许每 15 秒检查一次权限，另一个间隔检查权限并尝试在第一次鼠标移动时触发代码，然后重置权限——每秒一次。

初始检查是正确的（它等待 15 秒并且在鼠标移动之前不会触发），但是无论用户如何 activity，代码都会每 15 秒触发一次——尽管奇怪的是只有当window 处于焦点位置。我怀疑我的错误是在 mousemove 位，但我不确定。

var allow = false;
setInterval(permission, 15000);
function permission() {     
    if (allow == false){
        allow = true;
    }
}

setInterval(function() {
    $('body').one('mousemove', function() {
        if (allow == true){
            alert("code firing");
            allow = false;
            $('body').off( "mousemove" )
        }
    });
}, 1000);

Answer 1

您可以使用变量来跟踪最后一次鼠标移动。

var lastMove = new Date(); // assume last move was now

$(document).on('mousemove', function() {
  lastMove = new Date();
});

setInterval(function() {
    var currentTime = new Date();

    // compare dates in milliseconds to see if the difference is greater than 15000
    if (currentTime.getTime() - lastMove.getTime() >= 15000) {
        // if it's greater, trigger your code
    }
}, 5000); // perform this check every 5 seconds

我每 5 秒执行一次检查，因此最大可能延迟为 20 秒。

Answer 2

您应该只删除第二个 setInterval。

您的第一个 setInterval 每 15 秒正确地将 allow 设置为 true。

on('mousemove', function() {
    if(allow){
          // do stuff
          allow = false;
    }
});

这部分在鼠标移动时触发。但只有当allow为true时才有效。所以这实际上就是你想要的。由于 allow 设置为 true 每 15 秒一次，您将每 15 秒完成一次您的工作（当然只有在移动鼠标的情况下）。

当然重要的是，您在完成任务后将 allow 设置为 false。

Answer 3

你应该为此使用 setTimeout，因为你需要的时间间隔不是恒定的：你不知道用户什么时候会移动他们的鼠标，15 秒的时间应该再次从 0 开始。

这是一个等待 3 秒的演示（快速测试）：

var allow;
function lockUp() {
    allow = false;
    $('#output').text("No permission for 3 seconds!");
    setTimeout(function () {
        $('#output').text("Permission!");
        allow = true;
    }, 3000);
}

// start by locking for 3 secs    
lockUp();

$(document).on('mousemove', function() {
    if (!allow) return; // not allowed
    lockUp();
    // Perform the action here...
    // ...
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>

如何等待一定时间间隔，然后检查用户 activity 并触发代码并再次开始等待？

How to wait a certain interval, then check for user activity and fire code and start waiting again?

jquery

setinterval

timing