1. 程式人生 > >JS回撥函式全解析教程

JS回撥函式全解析教程

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