1. 程式人生 > 其它 >JS回撥函式——簡單易懂有例項

JS回撥函式——簡單易懂有例項

初學js的時候,被回撥函式搞得很暈,現在回過頭來總結一下什麼是回撥函式。什麼是JS?(點選檢視

下面先看看標準的解釋:

<script language="javascript">
02 function SortNumber( obj, func ) // 定義通用排序函式
03 {
04 // 引數驗證,如果第一個引數不是陣列或第二個引數不是函式則丟擲異常
05 if( !(obj instanceof Array) || !(func instanceof Function))
06 {
07 var e = new Error(); // 生成錯誤資訊
08 e.number = 100000; // 定義錯誤號
09 e.message = "引數無效"; // 錯誤描述
10 throw e; // 丟擲異常
11 }
12 for( n in obj ) // 開始排序
13 {
14 for( m in obj )
15 {
16 if( func( obj[n], obj[m] ) ) // 使用回撥函式排序,規則由使用者設定
17 {
18 var tmp = obj[n]; // 建立臨時變數
19 obj[n] = obj[m]; // 交換資料
20 obj[m] = tmp;
21 }
22 }
23 }
24 return obj; // 返回排序後的陣列
25 }

  我們先來看看回調的英文定義:A callback is a function that is passed as an argument to another function and is executed after its parent function has completed。

  字面上的理解,回撥函式就是傳遞一個引數化的函式,就是將這個函式作為一個引數傳到另一個主函式裡面,當那一個主函式執行完之後,再執行傳進去的作為引數的函式。走這個過程的引數化的函式 就叫做回撥函式。換個說法也就是被作為引數傳遞到另一個函式(主函式)的那個函式就叫做 回撥函式。

 舉一個別人舉過的例子:約會結束後你送你女朋友回家,離別時,你肯定會說:“到家了給我發條資訊,我很擔心你。” 對不,然後你女朋友回家以後還真給你發了條資訊。小夥子,你有戲了。其實這就是一個回撥的過程。你留了個引數函式(要求女朋友給你發條資訊)給你女朋友,然後你女朋友回家,回家的動作是主函式。她必須先回到家以後,主函式執行完了,再執行傳進去的函式,然後你就收到一條資訊了。

回撥函式應用場景多用在使用 js 寫元件時和耗時操作上面,尤其是元件的事件很多都需要回調函式的支援。

如果還是不明白,下面看一下程式碼:

<script type="text/javascript">
function title(value){//這是回撥函式!!!!
alert(value);
}
function main(title, value){//這個主函式:在引數列表中,title作為一個引數傳遞進來,也就是上文說的 引數化函式;然後value這個值正是title()函式中所需要的。
alert("我是主函式");
title(value);//結果為:'我是回撥函式'。——————然後在這行這個title(),它就是回撥函式咯。
}
main(title,"我是回撥函式");//title引數加上()後,就會變回一個函式,並會被執行一次。
//PS:看清楚,呼叫的是main()函式,意味著先執行main(),這時已經執行了主函式,title()被main()在函式體中執行了一次,因此title()是回撥函式。
</script>
回撥函式易混淆點——傳參:

一,將回調函式的引數作為與回撥函式同等級的引數進行傳遞。

二,回撥函式的引數在呼叫回撥函式內部建立。

參考連結:https://shaohui.blog.csdn.net/article/details/80284140?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_paycolumn_v3&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_paycolumn_v3&utm_relevant_index=1