The difference between global and local variables in jquery

When writing form validation today, I found a problem with variable scope.

Many people are entangled in the problem of local variables and global variables. In fact, global variables and local variables are different in scope and life cycle .

But global variables are the devil! Too many global variables will cause variable coverage! (If the name is the same, the variable declared later will overwrite the variable declared earlier)

Without further ado, let's look at an example!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>About global and local variables</title>
</head>
<body>
    <form>
        <input type="password" id="psw1" />
        <input type="password" id="psw2" />
        <input type="button" id="send" value="验证" />
    </form>
    <script type="text/javascript" src="../../resources/js/base/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../../resources/js/page/test.js"></script>
</body>
</html>

Method 1: Global

var psw1 = $ ('# psw1'). val ();
var psw2 = $ ('# psw2'). val ();
$(function testpsw() {
    $('#send').click(function() {
            if (psw1 == psw2) {
                alert('input is correct');
            }
            else{
                alert('input error');
            }
    });
})

Method 2: Local

$(function testpsw() {
    
    $('#send').click(function() {
        var psw1 = $ ('# psw1'). val ();
        var psw2 = $ ('# psw2'). val ();
            if (psw1 == psw2) {
                alert('input is correct');
            }
            else{
                alert('input error');
            }
    });
})

I have defined 2 inputs, all I need to do is to verify that the value of these two inputs is the same. Report OK if they are the same, but not OK if they are different.

The two results are

Method 1: (No matter what I input is wrong)

Method 2: (The two input values are correct when they are the same, and wrong when they are different)

Why is this happening?

The reason why the two are different is because of scope issues. When we follow the first approach. What we call in testpsw () is the global variable. In the second case, we call local variables. In the function block, when we trigger the event, psw1 and psw2 have changed. Then garbage collection. Local variables do not need to exist after the function is executed. The value of the global variable is equal to the value of the input that has been obtained before, and will not change with our changes.

In short, this variable is defined globally, and it already has a fixed value that will not change as we change the value of the input. It will always be there.

For local variables, each time we click the validate button, the values of both variables are refreshed. Each time we get a new value for our input. Because each time it executes the click event, this variable will be destroyed. Redefined every time!

Among them, this also involves more content about global variables and local variables, and also designed a garbage collection mechanism!

The rest will be introduced later!

The difference between global and local variables in jquery

Guess you like