首頁 > web前端 > js教程 > Javascript中的Callback方法淺析_javascript技巧

Javascript中的Callback方法淺析_javascript技巧

WBOY
發布: 2016-05-16 16:09:21
原創
1267 人瀏覽過

什麼是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'。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板