javascript的回調(diào)函數(shù)應(yīng)用示例

2024-05-06 16:01:20

字體：大中小

供稿：網(wǎng)友

回調(diào)函數(shù)就是一個(gè)通過函數(shù)指針調(diào)用的函數(shù)。下面以示例的方式為大家介紹下其具體的使用

回調(diào)函數(shù)概念：回調(diào)函數(shù)就是一個(gè)通過函數(shù)指針調(diào)用的函數(shù)。如果你把函數(shù)的指針（地址）作為參數(shù)傳遞給另一個(gè)函數(shù)，當(dāng)這個(gè)指針被用為調(diào)用它所指向的函數(shù)時(shí)，我們就說這是回調(diào)函數(shù)。

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.

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

考慮一個(gè)這樣的例子:

假如某個(gè)項(xiàng)目的底層和高層是由不同的人員協(xié)同完成.底層負(fù)責(zé)數(shù)據(jù)的存取,高層負(fù)責(zé)數(shù)據(jù)的表示.當(dāng)高層要用到某個(gè)模塊的數(shù)據(jù),于是他對(duì)底層人員說,我需要你們提供滿足某種需求的數(shù)據(jù),你給我提供一個(gè)接口.

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

復(fù)制代碼代碼如下:

//data表示底層提供的數(shù)據(jù)源,funcName表示高層的調(diào)用函數(shù)

function(data,funcName){

1.data屬于情形1,由底層處理;

2.data屬于情形2,由高層處理,怎么處理呢?利用高層提供的函數(shù)funcName處理

.....

}

我可能還沒說清楚,我們看個(gè)例子一下子就明白了

復(fù)制代碼代碼如下:

//假如提供的數(shù)據(jù)源是一整數(shù),為某學(xué)生的分?jǐn)?shù),當(dāng)num<=0,由底層處理,當(dāng)n>0時(shí)由高層處理.

//將下面這個(gè)函數(shù)拷貝下來存盤為1.js

function f(num,callback){
if(num<0) {
alert("調(diào)用低層函數(shù)處理!");
alert("分?jǐn)?shù)不能為負(fù),輸入錯(cuò)誤!");
}else if(num==0){
alert("調(diào)用低層函數(shù)處理!");
alert("該學(xué)生可能未參加考試！");
}else{
alert("調(diào)用高層函數(shù)處理!");
callback();
}
}

復(fù)制代碼代碼如下:

//將下面這個(gè)test.html文件存盤與1.js在一個(gè)目錄下：

<!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>無標(biāo)題文檔</title>
<script type="text/javascript">
function test(){
var p=document.getElementById("pp");
pp.innerText="";
var num=document.getElementById("score").value;
f(num,function(){ //匿名高層處理函數(shù)
if(num<60) alert("未及格！");
else if(num<=90) alert("該生成績(jī)優(yōu)良！");
else alert("該生成績(jī)優(yōu)秀!"); })
pp.innerText="by since1978 qq558064!"
}
</script>
</head>

<body>
<p>
回調(diào)函數(shù)示例:當(dāng)學(xué)生成績(jī)score<=0分時(shí)候，由底層處理；當(dāng)score>0時(shí)，由高層處理。
</p>
請(qǐng)輸入學(xué)生成績(jī)<input type="text">
<input type="button" value=" 看看結(jié)果">
<p></p>
</body>
</html>