javascript - 了解Jquery回调函数

Question

我对此堆栈代码有疑问:

<div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onblur="select()">Month<span class="caret"></span></button>
        <ul class="dropdown-menu" id="month">
            <li><a href="#01">January</a></li>
            <li><a href="#02">February/a></li>
            <li><a href="#03">March</a></li>
            <li><a href="#04">April</a></li>
            <li><a href="#05">May</a></li>
            <li><a href="#06">Juny</a></li>
            <li><a href="#07">July</a></li>
            <li><a href="#08">August</a></li>
            <li><a href="#09">September</a></li>
            <li><a href="#10">October</a></li>
            <li><a href="#11">November</a></li>
            <li><a href="#12">December</a></li>
        </ul>
</div>
<script>
    function select(){
        var value;

        $(document).on('click', 'li a', function () {
             value = $(this).attr('href');
             console.log(value); // Result is the value set. Ex: Value = Link
        });    

        console.log(value); // Result is undefined
     }
</script>

在此拉伸(stretch)中，单击按钮时将调用该函数。变量 value 的值不会保留在 JQuery 函数之外:

function select(){
    var value;

    $(document).on('click', 'li a', function () {
        value = $(this).attr('href');
        console.log(value); // Result is the value set. Ex: Value = Link
    });    

    console.log(value); // Result is undefined
}

如何在 Jquery 函数之外使用变量以及为什么 Jquery 有这种行为？

Answer 1

You cannot get the expected output for the given script. Also there is no fault in Jquery or Javascript.

在解释代码流程之前，我想提一下，事件处理程序注册不正确。

说明:

每次 onblur 事件发生时(即单击月份按钮并单击外部)，都会调用 select 函数并执行以下 3 个操作。

function select() {
    //(1)value variable decalred and it is "undefined"
    var value;

    //(2)event handler registration happens
    $(document).on('click', 'li a', function () {
        //this block will not executed during select function call
        value = $(this).attr('href');
        console.log(value); // Result is the value set. Ex: Value = Link
    });    

    //(3)prints value variable and it is undefined, regardless of how many times
    //   select function is called.
    console.log(value); // Result is undefined
}

通过查看上面的流程，只有内部 block 具有“value”变量的值。如果您调用 select 函数来检查它，由于 select 函数具有值声明，因此它将再次声明为“未定义”，并且它会再次注册事件处理程序，这是不好的并打印新实例的“值” “变量，即“未定义”。

好吧，让我们尝试将变量“value”保留在选择函数之外

var value; // <-- declaring outside select function
function select() {

    $(document).on('click', 'li a', function () {
        value = $(this).attr('href');
        console.log(value); // Result is the value set. Ex: Value = Link
    });    
    console.log(value); // Result is undefined
}

检查此http://jsfiddle.net/gLeoyuLh/1/中的上述更改

现在您也可以在函数外部访问“值”变量。但它仍然存在“多个事件处理程序注册问题”，并且将“值”保留在函数之外(全局)不是问题/错误，但您应该避免它。这不是一个好的做法。

解决方案

在加载期间声明事件寄存器，或者还有许多其他方法可以做到这一点。检查同一示例的 onload 更改 http://jsfiddle.net/gLeoyuLh/2/