javascript - 如何在javascript/Jquery中使用webworker检测空闲时间？

Question

我想使用 webworker 来检测我的空闲时间。

我正在写一些代码。我还需要添加什么，以便我的计数器在鼠标移动或按键时重新启动？

我是编码新手。请帮忙。这是我的代码:

<ul id="message-list"></ul>
<script   src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
  var worker = new Worker('demo.js');
  worker.onmessage = function(e){
    var message =e.data;
    $('#message-list').append('<li>'+message+'</li>');
  }
</script> 

这是我的主要 HTML 文件，下面是 demo.js :

var idleTime = 0;
var idleInterval = setInterval(timerIncrement, 1000);
function timerIncrement() {
idleTime = idleTime + 1;
self.postMessage( idleTime);
  if (idleTime == 15) { // 15 seconds
      self.close();
  }
}

在此代码循环中将运行 15 秒，然后 worker 将终止。我想要的是，如果我移动鼠标或按键盘上的任意键，此循环将再次从 0 开始。

Answer 1

由于 web worker 无法访问 DOM，您可以在按下某个键或鼠标移动时从您的主线程向您的 worker 发送消息:

 $(document).keypress(function(e){

              worker.postMessage({
                type: 'KEYPRESS',
                keycode: e.which
            });
    });

然后在你的 woker 中收听消息:

self.onmessage = function(msg) {
  switch (msg.data.type) {
    case 'KEYPRESS':
     console.log("Key pressed");
     idleTime = 0;
     break;
   }}