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執行，你能看到它只有一次。