How to set closure to capsule global variable

I have following functions,in which I can set prompt when someone leave page while inputting some values.

My consern is how to encapsule checkFlag. in this case, checkFlag is treated as global variables.

So that it is somewhat inconvenient.

let checkFlag = false;

const onBeforeunloadHandler = function(e) {
    var msg = '';
    e.returnValue = msg;
};

const formAlert = function() {
    if(!checkFlag) {
        window.addEventListener('beforeunload', onBeforeunloadHandler);
        for(var i = 0; i < checkValue.length; i++) {
            checkValue[i].removeEventListener('input', formAlert);
            checkValue[i].removeEventListener('change', formAlert);
        }
        checkFlag = true;
    }
};


(() => {
    let checkValue = document.querySelectorAll( "input[form='test'], textarea[form='test']");
    let submitBtn = document.querySelector('button[type="button"]');
    
    for(var i = 0; i < checkValue.length; i++) {
      checkValue[i].addEventListener('input', formAlert);
      checkValue[i].addEventListener('change', formAlert);
    }
    submitBtn.addEventListener('click', function() {
        window.removeEventListener('beforeunload', onBeforeunloadHandler);
    });
})();开发者_运维知识库

If someone has opinion, will you please let me know. Thanks

There's no need for anything in the outer scope. You can put it all into the IIFE.

(() => {
    let checkFlag = false;

    const onBeforeunloadHandler = function(e) {
        var msg = '';
        e.returnValue = msg;
    };

    const formAlert = function() {
        if(!checkFlag) {
            window.addEventListener('beforeunload', onBeforeunloadHandler);
            for(var i = 0; i < checkValue.length; i++) {
                checkValue[i].removeEventListener('input', formAlert);
                checkValue[i].removeEventListener('change', formAlert);
            }
            checkFlag = true;
        }
    };


    let checkValue = document.querySelectorAll( "input[form='test'], textarea[form='test']");
    let submitBtn = document.querySelector('button[type="button"]');
    
    for(var i = 0; i < checkValue.length; i++) {
      checkValue[i].addEventListener('input', formAlert);
      checkValue[i].addEventListener('change', formAlert);
    }
    submitBtn.addEventListener('click', function() {
        window.removeEventListener('beforeunload', onBeforeunloadHandler);
    });
})();

(() => { let checkFlag = false;

const onBeforeunloadHandler = function(e) {
    var msg = '';
    e.returnValue = msg;
};

const formAlert = function() {
    if(!checkFlag) {
        window.addEventListener('beforeunload', onBeforeunloadHandler);
        for(var i = 0; i < checkValue.length; i++) {
            checkValue[i].removeEventListener('input', formAlert);
            checkValue[i].removeEventListener('change', formAlert);
        }
        checkFlag = true;
    }
};


let checkValue = document.querySelectorAll( "input[form='test'], textarea[form='test']");
let submitBtn = document.querySelector('button[type="button"]');

for(var i = 0; i < checkValue.length; i++) {
  checkValue[i].addEventListener('input', formAlert);
  checkValue[i].addEventListener('change', formAlert);
}
submitBtn.addEventListener('click', function() {
    window.removeEventListener('beforeunload', onBeforeunloadHandler);
});

})();