How to set closure to capsule global variable-CodePudding

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

CodePudding user response：

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

CodePudding user response：

(() => { 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);
});

})();