JQUERY回调函数

Question

我是新来JQUERY

如果我运行下面的代码显示回调函数被重复两次

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

.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; 
 
    }

<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>

而如果我写的代码以下控制台发生一次

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

.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; 
 
    }

<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>

谁能请解释我的原因

Answer 1

当你执行：

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

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

当你执行鉴于：

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

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

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

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