A global variable changes in a nested function, but outside remains the same?

Question

JavaScript

The global variable does not change outside the nested function, you need to use the checkName variable in another function, but console.log returns false. Although the validation is successful. Please tell me what could be the reason?

var checkName = false;
         
     $('.userName').blur(function() {
            if($(this).val() != '') {
                var pattern = /^[a-zA-Z]+$/; 
                if(pattern.test($(this).val())){
                    checkName = true;
                    $('.nameValid').css({'display' : 'none'});
                } else {
                    $('.nameValid').css({'display' : 'block'});
                    $('.nameValid').text('Invalid name!');
                }
            } else {
                $('.nameValid').css({'display' : 'block'});
                $('.nameValid').text('Name must be filled!');
            }
        });
        console.log(checkName);

Answer 1

blur() just hangs a handler on the .userName elements and returns immediately.
The callback function that can change checkName will only be called on an event.