0

I do not need help with a soloution here

My code works but I am trying to understand the difference between two soloutions that give diffirent results even though one would think they would give the same result.

I have a page that I update using setinterval.

This page gets updated every 60 seconds(code will folow below). I had a problem where when I changed tab and came back the page composated the missing time by updating the page multiple times.

I googled and found that detecting the focus and blur event on the window would solve my problem. This in fact did solve the problem but also created a new one.

On focus I created a new Interval: 

 window.addEventListener('focus', function () {
                $.OverWatch.worker.setUpdateInterval()
            }, false);

And on blur I cleared all intervals on the page:

    window.addEventListener('blur', function () {
        $.OverWatch.worker.stopUpdateInterval()
    }, false);

This created a new issue. Once I changed the tab and came back to the page I had to wait another 60 seconds till the update took effect.

So i thought I could implement logic that updates the page on focus and creates a new interval:

Attempt 1

 window.addEventListener('focus', function () {

 $.OverWatch.worker.getView("/OverWatch/UpdateWatch", function () { // ajax updates page
       // inside of success function
          $.OverWatch.init();
          $.OverWatch.worker.setUpdateInterval()
       });

  }, false);

This worked but It took me back to my original problem where the browser ran the code multiple times.

After searching the web I found that i could set a function to the window.Onfocus event:

Attempt 2

    window.onfocus = function () {

        $.OverWatch.worker.getView("/OverWatch/UpdateWatch", function () {
            // inside of success function
            $.OverWatch.init();
            $.OverWatch.worker.setUpdateInterval()
        });
    }

This works perfectly but I don't understand why does this works without multiple page updates and not the code in attempt 1? What is the difference between these two?

ThunD3eR
  • 3,216
  • 5
  • 50
  • 94
  • 3
    You can only get one method for `onfocus` event while you can bound multiple handlers for `focus` event. `addEventListener()` add new handler, while `onfocus` overwrites any previous one bound using `onfocus` property – A. Wolff Apr 19 '16 at 08:08
  • But I am only assigning the focus on the window object and nowhere else. Unless this is a effect of bubbeling? – ThunD3eR Apr 19 '16 at 08:10
  • 1
    You are probably recalling `addEventListener()` methods, maybe by nesting handlers. Now i'm just guessing because you didn't provided any MCVE (minimalistic sample replicating issue). – A. Wolff Apr 19 '16 at 08:11
  • Well your guess ia actually correct..In my init function i made the same update call without realising it. Thank you! – ThunD3eR Apr 19 '16 at 08:14
  • 1
    Glad you have easily fixed it. So i can close it as dupe for better explaination – A. Wolff Apr 19 '16 at 08:18

0 Answers0