1. 程式人生 > >理解和使用 JavaScript 中的回撥函式

理解和使用 JavaScript 中的回撥函式

我們可以像使用變數一樣使用函式,作為另一個函式的引數,在另一個函式中作為返回結果,在另一個函式中呼叫它。當我們作為引數傳遞一個回撥函式給另一個函式時,我們只傳遞了這個函式的定義,並沒有在引數中執行它。

當包含(呼叫)函式擁有了在引數中定義的回撥函式後,它可以在任何時候呼叫(也就是回撥)它。這說明回撥函式並不是立即執行,而是在包含函式的函式體內指定的位置“回撥”它(形如其名)。

(一)匿名回撥函式

function fun(num1,num2,callback){
var num = num1 + num2;
callback(num);
};
fun(1,2,function(num){
console.log("the sum is:"+num);
});
輸出結果是:

the sum is:3

(二)具名回撥函式

function fun(num1,num2,callback){
var num = num1 + num2;
callback(num);
}
function print(num){
console.log("the sum is:"+num);
};
fun(1,2,print);
輸出結果是:
the sum is:3

剛開始看回調函式的時候真是一頭霧水,現在清晰多了,拿ajax舉例說明

$.ajax({
		type:"get",//方式是post或是get,與後臺人員協商,一般為get
		url:'./action/queryFour.php',//處理的後臺action的URL
		data:datatosend,//傳送的資料即剛剛定義的那個
		crossDomain:true,//不用管
		dataType:"json",//不用管
		success:function(data)
		{
			if(data.SUCCESS==true)
			{
				var i=0;
				while(i<4)
				{
					var key=data.DATA[i].POSITION;
					document.getElementsByTagName("img")[key*4].setAttribute("src","./"+data.DATA[i].COVERPIC);
					i++;
				}
			}
		},
		error:function(XMLHttpRequest, textStatus, errorThrown) {//這是錯誤處理,會在console口輸出一些狀態號幫助我們檢視錯誤原因
			console.log(XMLHttpRequest.status);
			console.log(XMLHttpRequest.readyState);
			console.log(textStatus);
	    }
	});
開始很納悶,success:function(data)裡面的data我沒有定義,為什麼data自動就是ajax傳送請求之後返回的資料?後來才知道原來這是已經定義好的,根據在引數列表中的位置判斷相應的含義,而與你的命名無關。

所以就自己寫了一個帶callback的有引數回撥函式,僅供大家參考~