javascript的回調函數應用示例

2019-11-20 21:04:20

字體：大中小

來源：轉載

供稿：網友

回調函數概念：回調函數就是一個通過函數指針調用的函數。如果你把函數的指針（地址）作為參數傳遞給另一個函數，當這個指針被用為調用它所指向的函數時，我們就說這是回調函數。

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.

使用回調函數的原因：可以把調用者與被調用者分開。調用者不關心誰是被調用者，所有它需知道的，只是存在一個具有某種特定原型、某些限制條件（如返回值為int）的被調用函數。

考慮一個這樣的例子:

假如某個項目的底層和高層是由不同的人員協同完成.底層負責數據的存取,高層負責數據的表示.當高層要用到某個模塊的數據,于是他對底層人員說,我需要你們提供滿足某種需求的數據,你給我提供一個接口.

底層的人員說:我給你提供數據,怎么展示和處理則是你的事情.我不可能為你每個需求都提供一個數據接口,我給你提供一個通過的接口.你得到數據,然后自己寫函數去展示.由是經過協商,雙方提供了一個這樣的接口:

復制代碼代碼如下:

 
//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>0時，由高層處理。 
</p> 
請輸入學生成績<input type="text" id="score"> 
<input type="button" onClick="test()" value=" 看看結果"> 
<p id="pp"></p> 
</body> 
</html> 