Question

我是JQUERY的新手

如果我正在运行以下代码，那么show callback函数会重复两次

＆＃13;

    $(document).ready(function(){
        $(".flip").click(function(){
            $(".panel").show("slow",function(){console.log('---');});
        });
    });

＆＃13;

    .flip {
        padding: 5px;
        text-align: center;
        background-color: #e5eecc;
        border: solid 1px #c3c3c3;
    }
    
    .panel {
        padding: 5px;
        text-align: center;
        background-color: #e5eecc;
        border: solid 1px #c3c3c3;
        padding: 50px;
        display: none;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flip">Click to slide down panel</div>
    <div class="panel">Hello world!</div>
    <div class="panel">Hello world!</div>

＆＃13;

如果我按如下方式编写代码，控制台就会发生一次

＆＃13;

    $(document).ready(function(){
        $(".flip").click(function(){
            $(".panel").show("slow",console.log('---'));
        });
    });

＆＃13;

    .flip {
        padding: 5px;
        text-align: center;
        background-color: #e5eecc;
        border: solid 1px #c3c3c3;
    }
    
    .panel {
        padding: 5px;
        text-align: center;
        background-color: #e5eecc;
        border: solid 1px #c3c3c3;
        padding: 50px;
        display: none;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flip">Click to slide down panel</div>
    <div class="panel">Hello world!</div>
    <div class="panel">Hello world!</div>

＆＃13;

任何人都可以向我解释原因

Answer 1

执行时：

    $(".panel").show("slow",function(){console.log('---');});

您将该函数作为第二个参数传递给.show。这将针对所有.panel执行，因此---将被记录两次。

而执行时：

    $(".panel").show("slow",console.log('---'));

第一个console.log('---')被执行（并且---被记录在控制台中一次）并且它的返回值（将undefined）作为第二个参数传递给.show。这相当于调用：

    $(".panel").show("slow");

因此，每个console.log都没有执行.panel，您只能看到它一次。

JQUERY回调函数

1 个答案: