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

Question

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

我最好的镜头如下。我创建了一个间隔，允许每 15 秒检查一次，另一个间隔检查权限并尝试在第一次鼠标移动时触发代码，然后重置权限 -- 每秒一次。

最初的检查是正确的（它会等待 15 秒并且直到鼠标移动才触发），但是无论用户活动如何，代码都会每 15 秒触发一次——尽管奇怪的是只有在窗口处于焦点时才触发。我怀疑我的错误出在 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

您应该为此使用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>

Answer 2

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

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 3

您应该只删除第二个setInterval。

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

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

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

当然重要的是，在你完成你的工作之后将allow 设置为false。