首頁 > web前端 > js教程 > 主體

jquery中回呼函數(callback)使用方法詳解

伊谢尔伦
發布: 2017-06-16 16:41:59
原創
5399 人瀏覽過

自學jquery的時候,看到一英文字(Callback),頓時背部隱隱冒冷汗。迅速google之,發現原來中文翻譯成回調。也就是回呼函數了。不懂啊,於是在google回呼函數,發現網路上的中文解釋實在是太「深奧」了,我承認自己才疏學淺了。看了幾個回調的例子後,似乎有點理解了。下面是我對回呼函數的理解,如果理解錯了,請指正,不甚感激。

        首先還是從jquery網站上的英文定義入手,身為國人,我真感到悲劇。一個回調的定義被國內的「高手」解釋成什麼樣,就在那繞圈子,似乎只有把你繞進去了,他才算高手。浮雲,一切都是浮雲。

A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.

這是js裡的解釋了,其他語言的算我沒說。

字面上理解下來就是,回呼就是一個函數的呼叫過程。那就從理解這個呼叫過程開始吧。函數a有一個參數,這個參數是個函數b,當函數a執行完以後執行函數b。那麼這個過程就叫回調。

其實中文也很好理解:回調,回調,就是回頭呼叫的意思。函數a的事先幹完,回頭再呼叫函數b。

舉個現實的例子:約會結束後你送你女朋友回家,離別時,你肯定會說:「到家了給我發條訊息,我很擔心你。」對不,然後你女朋友回家以後還真傳了訊息給你。小伙子,你有戲了。

其實這就是一個回呼的過程。你留了個函數b(請女朋友給你發個訊息)給你女朋友,然後你女朋友回家,回家的動作是函數a。她必須先回到家以後,函數a的內容執行完了,再執行函數b,然後你就收到一則訊息了。

這裡必須清楚一點:函數b是你以參數形式傳給函數a的,那麼函數b就叫回呼函數。

 也許有人有疑問了:一定要以參數形式傳過去嗎,我不可以直接在函數a裡面呼叫函數b嗎?確實可以。求解中。

<解惑:如果你直接在函數a裡呼叫的話,那麼這個回呼函數就被限制死了。但是使用函數做參數就有下面的好處:當你a(b)的時候函數b就成了回呼函數,而你還可以a(c)這個時候,函數c就成了回調函數。如果你寫成了function a(){...;b();}就失去了變數的彈性。 >

理解實例:

<html> 
 
<head> 
 
<title>回调函数(callback)</title> 
<script language="javascript" type="text/javascript"> 
function a(callback) 
{    
    alert("我是parent函数a!"); 
    alert("调用回调函数"); 
    callback(); 
} 
function b(){ 
alert("我是回调函数b"); 
 
} 
function c(){ 
alert("我是回调函数c"); 
 
} 
 
function test() 
{ 
    a(b); 
   a(c); 
} 
 
</script> 
</head> 
 
<body> 
<h1>学习js回调函数</h1> 
<button onClick=test()>click me</button> 
<p>应该能看到调用了两个回调函数</p> 
</body> 
 
</html>
登入後複製

回呼函數大家都會用,只是Jquery封裝了之後,不能讓大家明白回呼函數的真正使用。

JS Api 裡這樣解釋:A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.

當然我們可以在JS當中來真正嘗試一下回調函數的神奇。

如果你直接在函數a裡呼叫的話,那麼這個回呼函數就被限制死了。但用函數做參數就有下面的好處:當你a(b)的時候函數b就成了回呼函數,而你還可以a(c)這個時候,函數c就成了回呼函數。如果你寫成了function a(){...;b();}就失去了變數的彈性。下面是程式碼:

<!DOCTYPE HTML> 
<html> 
<head>  
<meta charset="GBK" />
<title>回调函数(callback)</title> 
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
<script language="javascript" type="text/javascript"> 
    var f;
    function d(){
        alert("我是Jquery定义的函数d");
    }
    var e = function(){
        alert("我也是Jquery定义的函数e");
    }
    
    function a(callback) {    
        alert("我是parent函数a!");   
        d(); 
        if (typeof callback === "function"){
            //alert(callback);
            callback(); 
        }
    } 
    function b(){ 
        alert("我是回调函数b");  
      
        d();
        e();
        f();
    } 
    function c(){ 
        alert("我是回调函数c");   
        d();
        e();
        f();
    } 
    function test1() { 
        a(b); 
    } 
    function test2() { 
        a(c); 
    } 
    $(function(){ 
        f = function(){ 
            alert("我是回调函数f");   
        } 
    });
</script> 
</head> 
<body > 
    <h1>学习js回调函数</h1> 
    <button onClick=test1()>test a(b)</button> 
    <button onClick=test2()>test a(c)</button> 
    <p>应该能看到调用了两个回调函数</p> 
    <p > </p> 
</body> 
</html>
登入後複製

以上是jquery中回呼函數(callback)使用方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板