带有if语句的Window.onblur

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?

Answer 1

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.

Answer 2

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);
         }});

        };