function httpRequest(url,callback){
// httpRequest不是阻塞函數 簡單點說就是不會阻止下面的函數執行
//用回調函數去解決
var xhr = new XMlHttpRequest();
xhr.open("GET",url,ture);
xhr.onreadystatechange = function(){
if (xhr.readyState ==4) {
callback(xhr.responseText);
};
}
xhr.send();
}
var text;
httpRequest("text.txt", function(result){
text = result;
console.log(text);
})
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();}就失去了變量的靈活性。
i think this callback only is a design mode of coding
下面用代碼來證實我的理解。
<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>