Window.onblur with if statement

Question

I am building kind of clock and I strongly need to use settimeout().

However, Google Chrome and Safari doesn't allow settimeout() when tab inactive. So, I decided to reloading page when tab active again. (I know, it's not proper way to do it, but I am new at javascript and tried to learn.) I saw this answer and tried to implement to my case. But there is a challenge, I have 3 modals in this page and I don't want reload page when modals are open.

So, I added a global variable equels an integer then changed the value of variable when modals are open.

Here is my code,

var modalCheck = 2;

function openModal() {
    var doneModal = document.getElementById("done");
    var done = document.getElementsByClassName("closeMessage")[0];

    modalCheck = 1;

    doneModal.style.display = "block";

    done.onclick = function() {
        doneModal.style.display = "none";
        modalCheck = 2;
    }

    window.onclick = function(event) {
        if (event.target == doneModal) {
            doneModal.style.display = "none";
            modalCheck = 2;
        }
    }
}

window.onblur = function() {
    window.onfocus= function () {
        if (modalCheck = 2) {
            console.log(modalCheck);
            location.reload(true);
        }
    }
};

Page reloading is still working, but if modals are opened page reaload immediately.

My question is why this is not working? Is there a syntax error or something like that? What is the solution?

I tried to use boolean but if it is globally setted it didn't change situation. — omerkocaaga, Sep 11 '17 at 18:31
First off, you should open the Developer Tools for your browser. That will give you information about errors, especially syntax errors. Next, maybe look at it from a different angle. Why do you need to have a timer running even when the tab is inactive? — Mike Cluck, Sep 11 '17 at 18:31
@omerkocaaga Please take a look at your own code a couple of lines above the said line, there's another `if`, which is written properly. — Teemu, Sep 11 '17 at 18:32
@VamshiGudipati I didn't get your answer. Can you be more specific on this? — omerkocaaga, Sep 11 '17 at 18:33
@omerkocaaga I'm going to steal your heureka experience, `=` is an assignment operator, comparison operators are `==` and `===`. — Teemu, Sep 11 '17 at 18:37
@MikeC I need because I have a function which change every minutes (`if second === 0`) a divs style. If I didn't add this function in a `settimeout()` it fails. So it looks I need it. But when chrome or safari tabs are inactive, `settimeout()` doesn't work sadly. So I asked this question. What are your solutions? — omerkocaaga, Sep 11 '17 at 18:40
@omerkocaaga Okay but do you really need to change the way an element looks when no one is looking? `setTimeout` will still result in a function being executed, it just won't happen when no one is looking at it. — Mike Cluck, Sep 11 '17 at 18:41
@Teemu thank you very much. Sometimes, my brain decided to stop working. — omerkocaaga, Sep 11 '17 at 18:42
@MikeC Think about you are building a clock. But here is a challenge. If users change the browser tab clock start to show time wrong. Could anyone use this clock? — omerkocaaga, Sep 11 '17 at 18:45
@omerkocaaga Sure. You just need to change how you're calculating what time it is. Save the start time right when you start the clock. Use `setTimeout` to update every second or so. Get the current time. Compare it against the start time. Voila, a working clock. — Mike Cluck, Sep 11 '17 at 18:46
@MikeC You forgot minutes must be change every "minute". It's not just showing time when page is open. It must be show time properly everytime. — omerkocaaga, Sep 11 '17 at 18:49
@omerkocaaga Seconds, minutes, whatever. It makes no difference. [Here's an example of it working.](https://jsfiddle.net/7vLffuco/) — Mike Cluck, Sep 11 '17 at 18:49
@MikeC Your example works on chrome. I didn't get it totally, but I tried to understand this. I am really new on javascript. Thank you very much. — omerkocaaga, Sep 11 '17 at 18:54
@MikeC I looked at your code again and figured it out. But I changed logic a little. I get time when onblur and set a cookie then get time onfocus and add minutes as difference. Then I remove cookie. Again, thanks a lot. You change my whole perspective on this. — omerkocaaga, Sep 12 '17 at 09:54

score 0 · Accepted Answer · answered Sep 11 '17 at 18:40

Here's the problem:

if ( modalCheck = 2 ) {

This "if" condition is always true, because you're actually assigning the value "2" to "modalCheck" rather than checking whether "modalCheck" equals "2". The assignment resolves to the value "2", which is treated as a "truthy" expression in your if statement. So this if statement never fails. I recommend

if ( modalCheck === 2 ) {

Others have suggested "if ( modalCheck == 2 ) {", but it's generally better to compare using === rather than == to avoid unexpected weirdness.

score 0 · Answer 2 · answered Sep 11 '17 at 18:52

i don't know what your html part is, try this code

   var modalCheck = 2;

    function openModal() {
        var doneModal = document.getElementById("done");
        var done = document.getElementsByClassName("closeMessage")[0];

        modalCheck = 1;

        doneModal.style.display = "block";

        done.onclick = function() {
            doneModal.style.display = "none";
            modalCheck = 2;
        }

        window.onclick = function(event) {
            if (event.target == doneModal) {
                doneModal.style.display = "none";
                modalCheck = 2;
            }
        }
    }

    window.onblur = function() {
     this.addEventListener('focus',function(){
        if (modalCheck == 2) {
                console.log(modalCheck);
                location.reload(true);
         }});

        };

Window.onblur with if statement

2 Answers2