Javascript中的Callback方法淺析
更新時間：2015年03月15日 10:33:43 投稿：junjie
這篇文章主要介紹了Javascript中的Callback方法淺析,本文講解了什么是callback、Javscript Callback、Callback是什么、Callback實例等內容,需要的朋友可以參考下
什么是callback
復制代碼 代碼如下:
回調函數(shù)就是一個通過函數(shù)指針調用的函數(shù)。如果你把函數(shù)的指針（地址）作為參數(shù)傳遞給另一個函數(shù)，當這個指針被用為調用它所指向的函數(shù)時，我們就說這是回調函數(shù)。回調函數(shù)不是由該函數(shù)的實現(xiàn)方直接調用，而是在特定的事件或條件發(fā)生時由另外的一方調用的，用于對該事件或條件進行響應。
這個解釋看上去很復雜，于是找到了知乎上一個更好的解釋
復制代碼 代碼如下:
你到一個商店買東西，剛好你要的東西沒有貨，于是你在店員那里留下了你的電話，過了幾天店里有貨了，店員就打了你的電話，然后你接到電話后就到店里去取了貨。在這個例子里，你的電話號碼就叫回調函數(shù)，你把電話留給店員就叫登記回調函數(shù)，店里后來有貨了叫做觸發(fā)了回調關聯(lián)的事件，店員給你打電話叫做調用回調函數(shù)，你到店里去取貨叫做響應回調事件?；卮鹜戤叀?br />
在Javascript中:
復制代碼 代碼如下:
函數(shù)A作為參數(shù)(函數(shù)引用)傳遞到另一個函數(shù)B中，并且這個函數(shù)B執(zhí)行函數(shù)A。我們就說函數(shù)A叫做回調函數(shù)。如果沒有名稱(函數(shù)表達式)，就叫做匿名回調函數(shù)。
實際上，也就是把函數(shù)作為參數(shù)傳遞。
Javscript Callback
把上面那些復雜的解釋都丟到垃圾桶里吧~，看看Callback是什么
Callback是什么
在jQuery中， hide的方法大概是這樣子的
復制代碼 代碼如下:
$(selector).hide(speed,callback)
使用的時候，
復制代碼 代碼如下:
$('#element').hide(1000, function() {
// callback function
});
我們只需要在里面寫一個簡單的函數(shù)
復制代碼 代碼如下:
$('#element').hide(1000, function() {
console.log('Hide');
});
有一個小小的注釋在這其中:Callback 函數(shù)在當前動畫 100% 完成之后執(zhí)行。然后我們就可以看到真正的現(xiàn)象，當id為element的元素隱藏后，會在console中輸出Hide。
就也就意味著:
Callback實際上是，當一個函數(shù)執(zhí)行完后，現(xiàn)執(zhí)行的那個函數(shù)就是所謂的callback函數(shù)。
Callback作用
正常情況下函數(shù)都是按順序執(zhí)行的，然而Javascript是一個事件驅動的語言。
復制代碼 代碼如下:
function hello(){
console.log('hello');
}
function world(){
console.log('world');
}
hello();
world();
所以正常情況下都會按順序執(zhí)行的，然而當執(zhí)行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的函數(shù)，接收三個參數(shù):前兩個是要相加的兩個參數(shù)，第三個參數(shù)是回調函數(shù)。當函數(shù)執(zhí)行時，返回相加結果，并在控制臺中輸出'call 20'。
相關文章
JavaScript canvas實現(xiàn)跟隨鼠標事件
這篇文章主要為大家詳細介紹了JavaScript canvas實現(xiàn)跟隨鼠標事件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02![js的[defer]和[async]屬性](http://img.jbzj.com/images/xgimg/bcimg1.png)
這篇文章主要介紹了js的<script>的[defer]和[async]屬性,需要的朋友可以參考下2014-11-11
JavaScript新手必看之var在for循環(huán)中的坑
var這個關鍵字在JS當中是相當常用的，但同時配合到for循環(huán)的話會出現(xiàn)不符合預期的運行結果，所以本文就來為大家講講如何避免這種情況的出現(xiàn)2023-05-05
需要改變多個元素的位置，可以通過元素拖動來實現(xiàn)，下面以圖片拖動為例，用jQuery來實現(xiàn),需要的朋友可以參考下2014-05-05
借助script進行Http跨域請求:JSONP實現(xiàn)原理及代碼
script元素的src屬性能設置URL并發(fā)起HTTP GET請求實現(xiàn)腳本操作HTTP可以跨域通信而不受限與同源策略，接下來為大家詳細介紹下Http跨域請求實現(xiàn)，感興趣的你可以參考下哈2013-03-03
這篇文章主要介紹了JS中apply()的應用,結合實例形式分析了apply()操作數(shù)組的相關使用技巧,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了JS實現(xiàn)鼠標箭頭變成一個燃燒燭光效果的方法,實例分析了javascript操作鼠標事件及圖片的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了JS實現(xiàn)文件動態(tài)順序載入的方法,實例分析了基于Mootools框架實現(xiàn)動態(tài)載入的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
JavaScript正則表達式校驗與遞歸函數(shù)實際應用實例解析
這篇文章主要介紹了JavaScript正則表達式校驗與遞歸函數(shù)實際應用,需要的朋友可以參考下2017-08-08
這篇文章主要為大家詳細介紹了Javascript實現(xiàn)打鼓效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01