一個最簡單的例子，清楚說明回調函數的作用和強大功能 by since 1978
考慮一個這樣的例子:
假如某個項目的底層和高層是由不同的人員協同完成.底層負責數據的存取,高層負責數據的表示.當高層要用到某個模塊的數據,於是他對底層人員說,我需要你 們提供滿足某種需求的數據,你給我提供一個接口.
底層的人員說:我給你提供數據,怎么展示和處理則是你的事情.我不可能為你每個需求都提供一個數據接口,我給你提供一個通過的接口.你得到數據,然后自己 寫函數去展示.由是經過協商,雙方提供了一個這樣的接口:
//data表示底層提供的數據源,funcName表示高層的調用函數
function(data,funcName){
1.data屬於情形1,由底層處理;
2.data屬於情形2,由高層處理,怎么處理呢?利用高層提供的函數funcName處理
.....
}
我可能還沒說清楚,我們看個例子一下子就明白了
//假如提供的數據源是一整數,為某學生的分數,當num<=0,由底層處理,當n>0時由高層處理.
//將下面這個函數拷貝下來存盤為1.js
function f(num,callback){ if(num<0) { alert("調用低層函數處 理!"); alert("分數不能為負,輸入錯誤!"); }else if(num==0){ alert("調用低層函數處理!"); alert("該學生可能未參加考試！"); }else{ alert("調用高層函數處理!"); callback(); } }
//將下面這個test.html文件存盤與1.js在一個目錄下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> < html> < head> < meta http-equiv="Content-Type" content="text/html; charset=gb2312"> < script src="1.js" type="text/javascript"></script> < title>無標 題文檔</title> < script type="text/javascript"> function test(){ var p=document.getElementById("pp"); pp.innerText=""; var num=document.getElementById("score").value; f(num,function(){ //匿名高層處理函數 if(num<60) alert("未及格！"); else if(num<=90) alert("該生成績優良！"); else alert("該生成績優秀!"); }) pp.innerText="by since1978 qq558064!" } < /script> < /head>
<body> < p> 回調函數示例:當學生成績score<=0分時候，由底層處理；當score& gt;0時，由高層處理。 < /p> 請輸入學生成績<input type="text" id="score"> < input type="button" onClick="test()" value=" 看看結果"> <p id="pp"></p> < /body> < /html> 運 行此文件，可以看到效果