How to use webworker in javascript/Jquery to detect idle time?

Question

I want to use webworker to detect my idle time.

I'm writing some code. What else do I need to add so that my counter restart on mouse move or key press?

I'm new to coding. Please help. Here is my code:

<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>

This is my main HTML file and demo.js is below :

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

In this code loop will run for 15 seconds then worker will terminate. What I want is this loop will again start from 0 if I move my mouse or press any key on keyboard.

Is there any particular reason you've decided to use workers for this? It seems like something that would run just fine in the main thread? — adeneo
– adeneo, Commented Feb 23, 2017 at 6:42
@adeneo There are some other things that I am going to add in this demo.js and I thought if there is a way I could use this also inside worker js — Frank
– Frank, Commented Feb 23, 2017 at 7:00
@adeneo I never used worker before therefore I want to ask can we have multiple postmessage and onmessage ... like one postmessage is sending some different object and another postmessage is sending different object which are read by onmessage in main page?? — Frank
– Frank, Commented Feb 23, 2017 at 7:03
For the detect when mouse has moved etc (i.e when idle breaks) there are a lot of events that you can listen for, but we can't decide for you which one you'll want to include as breakers. For the worker, first, you don't seem to make the good usage of it. Second, of course you can send different postMessage to it. Just make your worker's onmessage handle different cases and route it to different functions. (I usually use an Array like syntax, where the first index is the name of the function to be called in my worker script, and the second parameters to this function) — Kaiido
– Kaiido, Commented Feb 23, 2017 at 9:02
@Kaiido Consider mousemove the event, I tried document.mousemove and on that event i made idletime=0, but the problem is demo.js dont understand what document or body is, so can you please try it with mousemove event see if it works? and also can you give a example of different postmessage and onmessage ? — Frank
– Frank, Commented Feb 23, 2017 at 9:46

mjlowky · Accepted Answer · 2017-02-24 02:06:16Z

1

Since web workers do not have access to DOM, you can post a message to your worker from your main thread when a key is pressed or on mouse move:

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

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

And in your woker listen to the message:

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

answered Feb 24, 2017 at 2:06

mjlowky

1,22313 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use webworker in javascript/Jquery to detect idle time?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related