js回調函數(callback)理解


Mark!

js學習

不喜歡js,但是喜歡jquery,不解釋。

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

 

轉載:http://luxiao1223.blog.51cto.com/2369118/482885

 

針對javascript回調函數傳參數的簡單實例

 

問題:

現在有函數如下定義:
function A(a,callback){
....
}
function B(){
....
}
則可以有如下調用
A(a,B);來實現回調。


現在我希望傳給B一個參數c,即實現類似於:

A(a,B(c));的效果,各位高手幫幫忙,應該如何實現?

 

解答:

    1. <html> 
    2. <head> 
    3. <title> 
    4. jsp3 
    5. </title> 
    6. </head> 
    7. <body bgcolor="#ffffff"> 
    8. <script language="javascript" type="text/javascript"> 
    9. function A(a,callback){ 
    10. var b=callback; 
    11. alert(a+b); 
    12. function B(c){ 
    13. return (-c); 
    14. </script> 
    15. <form method="post" action="jsp3.jsp"> 
    16. <br><br> 
    17. <input type="button" name="Submit" value="Submit" onclick="A(4,B(3));"> 
    18. </form> 
    19. </body> 
    20. </html>

轉載於:http://blog.sina.com.cn/s/blog_4bb52a160100da4w.html

 

<span style="font-size:14px;">我包裝了jQuery的ajax方法
function doAjax(u,param,callback){
      $.ajax({
            type:'POST',
            url:u,
            data:param,
            success:callback
      });
}

function showAlert(data){
     alert(data);
}

比如這樣調用 doAjax("server.php","id=12&type=1",showAlert);
$.ajax 在success后,會返回一個data到showAlert中,顯示出來 ,沒有問題.
可是,當我想多傳一個參數給showAlert時怎么寫?
寫成doAjax("server.php","id=12&type=1",showAlert("hi",data))、或者把上面的success:callback 寫成success:callback(msg,data)顯然都不行,如之奈何?求助~~~</span>

  

<span style="font-size:14px;color:#333333;">簡單,很多方法都定義了回調函數,回調函數也是函數,就是說不管怎么傳,只需要是個函數類型即可。寫法如下。
方式1,
doAjax(參數1,參數2,function(request,opts){
         callback(request,opts,agrs);
 });
function callback(request,opts,args){
              
};
方式2,
var args=N;
doAjax(參數1,參數2,function(request,opts){
       var X=N;
       回調函數代碼塊..
       和以上幾乎一樣,看個人編碼方式選擇。      
});</span>

  

越不想學什么,越就被什么所折磨。看看javascript回調吧。 直接上碼吧。。

    1.  
    2. <</span>html>   
    3.       
    4.    <</span>head>   
    5.       
    6.    <</span>title>回調函數(callback)</</span>title>   
    7.    <</span>script language="javascript" type="text/javascript">   
    8.   
    9. function a(callback){  
    10.     alert("我來自父函數a");  
    11.       
    12.     callback();  
    13.   
    14. }  
    15. function b(){  
    16.     alert("我來自子(回調)函數 b");  
    17.   
    18. }  
    19.   
    20. function c(){  
    21.     alert("我來自子(回調)函數 c");  
    22.     }  
    23.       
    24.       
    25.     function test(){  
    26.       
    27.         a(b);  
    28.           
    29.         a(c);  
    30.     }  
    31.       
    32. //--------------------下面2個函數簡單演示了從父函數傳遞給回調函數----------    
    33.       
    34. //Callback 就是一個參數名 這個參數代表的是一個函數 暫且不要管這個函數有沒有參數   
    35. //  。。。 應該還有其他寫法吧?   
    36. function e(m,n,Callback){  
    37.     var d = m+n;  
    38.     alert("一個從父函數e 產生的參數將要被傳遞給回調函數 ,這個參數是:"+d);  
    39.       
    40.     //這里才寫你想調用的函數---參數要正確  
    41.     Callback(d);  
    42. //-----------  
    43. }//     |  
    44. //      |   
    45. function callback(data){  
    46.   
    47.         alert("我是回調函數,我的名字叫:callback ,我接收到來自父函數的參數,參數是:"+data);  
    48.   
    49. }  
    50.   
    51.   
    52. </</span>script>  
    53. </</span>head>  
    54.   
    55. <</span>body>  
    56.     <</span>h2>a CallBack is a function that is passed as an argument to another function and is executed after its parent function has completed;</</span>h2>   
    57.     <</span>hr />  
    58.     <</span>a href="#" onclick="javascript:test();">不傳遞參數的Callback</</span>a><</span>br />  
    59.     <</span>br />  
    60.     <</span>br />  
    61.     <</span>br />  
    62.     <</span>a href="#" onclick="javascript:e(7,8,callback);">傳遞參數的Callback</</span>a>  
    63.     <</span>hr />  
    64.     </</span>body>  
    65.       
    66.     </</span>html>  

轉載於:http://blog.sina.com.cn/s/blog_601b97ee0101f1rc.html

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM