Javascript中的Callback方法淺析

 這篇文章主要介紹了Javascript中的Callback方法淺析,本文講解了什麼是callback、Javscript Callback、Callback是什麼、Callback實例等內容,需要的朋友可以參考下

   

什麼是callback

 

代碼如下:
回調函數就是一個通過函數指針調用的函數。如果你把函數的指針（地址）作為參數傳遞給另一個函數，當這個指針被用為調用它所指向的函數時，我們就說這是回調函數。回調函數不是由該函數的實現方直接調用，而是在特定的事件或條件發生時由另外的一方調用的，用於對該事件或條件進行響應。

 

這個解釋看上去很復雜，於是找到了知乎上一個更好的解釋

 

代碼如下:
你到一個商店買東西，剛好你要的東西沒有貨，於是你在店員那裡留下了你的電話，過了幾天店裡有貨了，店員就打了你的電話，然後你接到電話後就到店裡去取了貨。在這個例子裡，你的電話號碼就叫回調函數，你把電話留給店員就叫登記回調函數，店裡後來有貨了叫做觸發了回調關聯的事件，店員給你打電話叫做調用回調函數，你到店裡去取貨叫做響應回調事件。回答完畢。

 

在Javascript中:

 

代碼如下:
函數A作為參數(函數引用)傳遞到另一個函數B中，並且這個函數B執行函數A。我們就說函數A叫做回調函數。如果沒有名稱(函數表達式)，就叫做匿名回調函數。
實際上，也就是把函數作為參數傳遞。

 

Javscript Callback

把上面那些復雜的解釋都丟到垃圾桶裡吧~，看看Callback是什麼

Callback是什麼

在jQuery中， hide的方法大概是這樣子的

代碼如下:
$(selector).hide(speed,callback)
使用的時候，
代碼如下:
$('#element').hide(1000, function() {
// callback function
});
我們只需要在裡面寫一個簡單的函數
代碼如下:
$('#element').hide(1000, function() {
console.log('Hide');
});
有一個小小的注釋在這其中:Callback 函數在當前動畫 100% 完成之後執行。然後我們就可以看到真正的現象，當id為element的元素隱藏後，會在console中輸出Hide。

 

就也就意味著:

Callback實際上是，當一個函數執行完後，現執行的那個函數就是所謂的callback函數。

Callback作用

正常情況下函數都是按順序執行的，然而Javascript是一個事件驅動的語言。

代碼如下:
function hello(){
console.log('hello');
}

 

function world(){
console.log('world');
}

hello();
world();

所以正常情況下都會按順序執行的，然而當執行world事件的時間比較長時。
代碼如下:
function hello(){
setTimeout( function(){
console.log( 'hello' );
}, 1000 );
}

 

function world(){
console.log('world');
}

hello();
world();

那麼這個時候就不是這樣的，這時會輸出world，再輸出hello，故而我們需要callback。

 

Callback實例

一個簡單地例子如下

代碼如下:
function add_callback(p1, p2 ,callback) {
var my_number = p1 + p2;
callback(my_number);
}

 

add_callback(5, 15, function(num){
console.log("call " + num);
});

在例子中我們有一個add_callback的函數，接收三個參數:前兩個是要相加的兩個參數，第三個參數是回調函數。當函數執行時，返回相加結果，並在控制台中輸出'call 20'。