Search code examples
javascriptgoogle-chromefirefoxfade

Detecting if browser window is active and start event after window is active again [JavaScript]


The idea is simple: I have buttons which refer to another website. Whenever the user has clicked more than two links I want to refresh some content (through Ajax). For that to work I need to detect if my window is active or not, since I only want the event to start when the user is BACK on my page.

Without further ado this is my code:

$(document).on("click", "a", function() {
        numberOfClicks += 1;
        if (numberOfClicks >= 2)
        {
            userOnWebsiteOrNot();
            numberOfClicks = 0;
        }
    });

    function userOnWebsiteOrNot()
    {
        if (focusedOrNot == 0)
        {
            $('#resultaat').hide().fadeIn(5000);
        }
    }

        window.addEventListener('focus', function() {
            document.title = 'focused';
            focusedOrNot = 0;
        });

        window.addEventListener('blur', function() {
            document.title = 'not focused';
            focusedOrNot = 1;
    });

It DOES detect whenever the user is on the page or not, but somehow the fade always happens. Could anybody explain me what I'm doing wrong or give me any ideas?

Thanks Yenthe

ANSWER: I needed a setTimeOut on three functions because they would otherwise check too fast. Thank you for that help Romo! ;) All credit goes to Romo to be honest.

$(document).on("click", "a", function() {
        numberOfClicks += 1;
        if (numberOfClicks >= 2)
        {
            haallinks();
            setTimeout(function() {
                userOnWebsiteOrNot();
            }, 2000);
            numberOfClicks = 0;
        }
    });

    function userOnWebsiteOrNot()
    {
        if (focusedOrNot === 0)
        {
            $('#resultaat').hide().fadeIn(5000);
        }
        else
        {
            controlerenActiefOfNiet();
        }
    }

    function controlerenActiefOfNiet()
    {
        setTimeout(function() {
            userOnWebsiteOrNot();
        }, 2000);
    }

    window.addEventListener('focus', function() {
        setTimeout(function() {
            focusedOrNot = 0;
        }, 0);
    });


    window.addEventListener('blur', function() {
        setTimeout(function() {
            focusedOrNot = 1;
        }, 1000);
    });

Solution

  • I think the problem is that when you click a link the second time the window will always be focused. JS runs pretty fast. To overcome this, I think you should do a setTimeout() and delay it 200ms or so to give the window time to "lose" focus

    setTimeout(function() {userOnWebsiteOrNot(); },2000);
    

    http://jsfiddle.net/xVHgE/

    Edit: Adding delay to event listener. I don't think you can "delay" an event though, just the function it runs.

    window.addEventListener('focus', function() {
                setTimeout( function() {
                    $('#test').html('focus');
                    focusedOrNot = 0; 
                } , 5000);
            });