使用jQuery调用onblur + onfocus函数窗口

Question

hI got a problem to use jQuery to recall afunction if window is on focus. And when window is not on focus (onblur) so pause that function until window is on focus again.

Here is my code:

function functiondosomething (user_id) {

var myInterval;
var time_delay = 1000;


    $(window).focus(function () {

 setTimeout(function() { functiondosomething (user_id); }, time_delay);


    }).blur(function () {
        clearTimeout(myInterval); // Clearing interval on window blur

    });

 setTimeout(function() { functiondosomething (user_id); }, time_delay);// ## problem here

}

My problem is :

1. When I remove that line (which I marked problem here above.) the function will not work at first time until I click out of window to make it onblur and come back on focus again, so it starting to work.

2. If I let that line (which I marked problem here above.) be there, the function could not pause, even I click out of window to make it be onblur.

3. When I click onfocus it start working and stop. I have to click out of window and focus the window again again and again. Something like it need to be activate by clicking out of window and clicking back to window again.

   What should I do ?

Answer 1

I see a few problems here:

1. You're not setting myInterval so when you call clearTimeout(myInterval) it's not clearing anything.
2. You're using the same function to set up your listeners and call setTimeout recursively. This means your handlers are being set every time you recur, and the recursion means it will run whether the handlers run or not.

I think you need to separate things a bit:

function functiondosomething(user_id) {
  // Do stuff...
}

function setupHandlers(user_id) {
  var myInterval;
  var time_delay = 1000;

  function doSomethingWrapper() { 
    functiondosomething(user_id);
    myInterval = setTimeout(doSomethingWrapper, time_delay); 
  }

  $(window).focus(function () {
    doSomethingWrapper();
  }).blur(function () {
    clearTimeout(myInterval); // Clearing interval on window blur
  });
  doSomethingWrapper();
};