如何在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秒，然后工作程序将终止。 我想要的是如果我移动鼠标或按键盘上的任意键，此循环将再次从0开始。

Answer 1

由于Web工作者无权访问DOM，因此您可以在按下某个键或移动鼠标时从主线程向您的工作人员发送消息：

 $(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;
   }}