本章主要講解回調函數在jQuery中的使用技巧與實現原理,概念上的東西看似簡單,但是在實際運用中要做到靈活自如卻也不是那么容易的事,而且對于部分開發者來說它仍然是一個謎。在閱讀本文之后你能深入理解這個“回調函數”。
函數是第一類對象,這是javascript中的一個重要的概念。意味著函數可以像對象一樣按照第一類管理被使用,所以在javaScript中的函數:
? 能“存儲”在變量中
? 能作為函數的實參被傳遞
? 能在函數中被創建
? 能從函數中返回
百科里面是這么解釋的:
回調函數就是一個通過函數指針調用的函數。如果你把函數的指針(地址)作為參數傳遞給另一個函數,當這個指針調用它所指向的函數時,我們就說這是回調函數。回調函數不是由該函數的實現方直接調用,而是在特定的事件或條件發生時由另外的一方調用的,用于對該事件或條件進行響應。
因此從上面可以看出來,回調本質上是一種設計原則,并且jQuery的設計原則遵循了這個模式。
在后端的編程語言中,傳統函數以參數形式輸入數據,并且使用返回語句返回值。理論上,在函數結尾處有一個return返回語句,結構上就是:一個輸入和一個輸出。簡單的理解函數本質上就是輸入和輸出之間實現過程的映射。
但是,當函數的實現過程非常漫長,你是選擇等待函數完成處理,還是使用回調函數進行異步處理呢?這種情況下,使用回調函數變得至關重要,例如:AJAX請求。若是使用回調函數進行處理,代碼就可以繼續進行其他任務,而無需空等。實際開發中,經常在javascript中使用異步調用。
jQuery中遍地都是回調的設計:
異步回調:
事件句柄回調
$(document).ready(callback); $(document).on(‘click’,callback)
Ajax異步請求成功失敗回調
$.ajax({ url: "aaron.html", context: document }).done(function() { //成功執行 }).fail(function() { //失敗執行 );
動畫執行完畢回調
$('#clickme').click(function() { $('#book').animate({ opacity: 0.25, left: '+=50', height: 'toggle' }, 5000, function() { // Animation complete. }); });
以上都是jQuery的回調直接運用,運用基本都是將匿名函數作為參數傳遞給了另一個函數或方法。而且以上都有一個特點,執行的代碼都是異步的。
同步回調:
當然回調不僅僅只是處理異步,一般同步(很耗時的任務)的場景下也經常用到回調,比如要求執行某些操作后執行回調函數。
一個同步(阻塞)中使用回調的例子,目的是在test1代碼執行完成后執行回調callback
var test1 = function(callback) { //執行長時間操作 callback(); } test1(function() { //執行回調中的方法 });
所以理解回調函數最重要的2點:
1、一個回調函數作為參數傳遞給另一個函數是,我們僅僅傳遞了函數定義。我們并沒有在參數中執行函數。我們并不傳遞像我們平時執行函數一樣帶有一對執行小括號()的函數
2、回調函數并不會馬上被執行,它會在包含它的函數內的某個特定時間點被“回調”。
請驗證,完成請求
由于請求次數過多,請先驗證,完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報