Setting a closure to encapsulate a global variable

Question

Setting a closure to encapsulate a global variable

I possess a set of functions that allow me to configure prompts for when someone exits a page while inputting values. However, my main concern lies in how to properly encapsulate the checkFlag. Currently, checkFlag is being treated as a global variable which proves to be 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 you have any suggestions or feedback, please don't hesitate to share. Thank you!

javascript html css

Answer 1

Answer №1

It's best to encapsulate everything in the IIFE instead of using variables in the outer scope.

(() => {
    let flag = false;

    const unloadHandler = function(e) {
        var message = '';
        e.returnValue = message;
    };

    const alertForm = function() {
        if(!flag) {
            window.addEventListener('beforeunload', unloadHandler);
            for(var j = 0; j < values.length; j++) {
                values[j].removeEventListener('input', alertForm);
                values[j].removeEventListener('change', alertForm);
            }
            flag = true;
        }
    };

    let values = document.querySelectorAll( "input[form='test'], textarea[form='test']");
    let button = document.querySelector('button[type="button"]');
    
    for(var k = 0; k < values.length; k++) {
      values[k].addEventListener('input', alertForm);
      values[k].addEventListener('change', alertForm);
    }
    button.addEventListener('click', function() {
        window.removeEventListener('beforeunload', unloadHandler);
    });
})();

Answer 2

It's best to encapsulate everything in the IIFE instead of using variables in the outer scope.

(() => {
    let flag = false;

    const unloadHandler = function(e) {
        var message = '';
        e.returnValue = message;
    };

    const alertForm = function() {
        if(!flag) {
            window.addEventListener('beforeunload', unloadHandler);
            for(var j = 0; j < values.length; j++) {
                values[j].removeEventListener('input', alertForm);
                values[j].removeEventListener('change', alertForm);
            }
            flag = true;
        }
    };

    let values = document.querySelectorAll( "input[form='test'], textarea[form='test']");
    let button = document.querySelector('button[type="button"]');
    
    for(var k = 0; k < values.length; k++) {
      values[k].addEventListener('input', alertForm);
      values[k].addEventListener('change', alertForm);
    }
    button.addEventListener('click', function() {
        window.removeEventListener('beforeunload', unloadHandler);
    });
})();

Answer 3

Answer №2

(() => { let flagChecked = false;

const unloadHandler = function(e) {
    var message = '';
    e.returnValue = message;
};

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


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

for(var index = 0; index < valueToCheck.length; index++) {
  valueToCheck[index].addEventListener('input', alertForm);
  valueToCheck[index].addEventListener('change', alertForm);
}
buttonSubmit.addEventListener('click', function() {
    window.removeEventListener('beforeunload', unloadHandler);
});

})();

Answer 4

(() => { let flagChecked = false;

const unloadHandler = function(e) {
    var message = '';
    e.returnValue = message;
};

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


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

for(var index = 0; index < valueToCheck.length; index++) {
  valueToCheck[index].addEventListener('input', alertForm);
  valueToCheck[index].addEventListener('change', alertForm);
}
buttonSubmit.addEventListener('click', function() {
    window.removeEventListener('beforeunload', unloadHandler);
});

})();

Setting a closure to encapsulate a global variable

Answer №1

Answer №2

Similar questions

Enabling communication between my React frontend and Express server

Errors in the console appear when jQuery loads HTML containing images

geolocation data not being updated in isolate scope binding

I'm curious why I need to add an extra await in my Vue.js unit test whenever multiple calls are made to my Firebase auth mock

Creating a dynamic grid design with images using the <ul><li></li></ul> HTML tags

Having trouble with implementing ng-hide and ng-show functionality

Tips for implementing File upload with WEB API in Dot net core

I'm facing an issue with my GraphQL resolvers due to a circular dependency

Techniques for manipulating multiple circles with JavaScript

CSS border-image negative positioning (no HTML required)

How to utilize JS variables for filtering an array in EJS?

Initiate the setInterval function upon clicking the button

Exploring the Possibilities of Manipulating HTML Tables with CSS

The JavaScript code in Three.js is experiencing issues when running in a secure HTTPS environment

Javascript recursive function calling itself

"Enhance your web development with Vue.js and Vue-chart.js for beautiful linear

Utilizing external objects within the data() function of Vue: A comprehensive guide

The implementation of an onclick event in a freshly created HTML element is functioning solely on the final element

Error: controller undefined

Using indented, multi-line logging in a NodeJS environment can help to