Javascript中的Callback方法淺析
什么是callback
回調(diào)函數(shù)就是一個(gè)通過函數(shù)指針調(diào)用的函數(shù)。如果你把函數(shù)的指針(地址)作為參數(shù)傳遞給另一個(gè)函數(shù),當(dāng)這個(gè)指針被用為調(diào)用它所指向的函數(shù)時(shí),我們就說這是回調(diào)函數(shù)?;卣{(diào)函數(shù)不是由該函數(shù)的實(shí)現(xiàn)方直接調(diào)用,而是在特定的事件或條件發(fā)生時(shí)由另外的一方調(diào)用的,用于對(duì)該事件或條件進(jìn)行響應(yīng)。
這個(gè)解釋看上去很復(fù)雜,于是找到了知乎上一個(gè)更好的解釋
你到一個(gè)商店買東西,剛好你要的東西沒有貨,于是你在店員那里留下了你的電話,過了幾天店里有貨了,店員就打了你的電話,然后你接到電話后就到店里去取了貨。在這個(gè)例子里,你的電話號(hào)碼就叫回調(diào)函數(shù),你把電話留給店員就叫登記回調(diào)函數(shù),店里后來(lái)有貨了叫做觸發(fā)了回調(diào)關(guān)聯(lián)的事件,店員給你打電話叫做調(diào)用回調(diào)函數(shù),你到店里去取貨叫做響應(yīng)回調(diào)事件?;卮鹜戤叀?br />
在Javascript中:
函數(shù)A作為參數(shù)(函數(shù)引用)傳遞到另一個(gè)函數(shù)B中,并且這個(gè)函數(shù)B執(zhí)行函數(shù)A。我們就說函數(shù)A叫做回調(diào)函數(shù)。如果沒有名稱(函數(shù)表達(dá)式),就叫做匿名回調(diào)函數(shù)。
實(shí)際上,也就是把函數(shù)作為參數(shù)傳遞。
Javscript Callback
把上面那些復(fù)雜的解釋都丟到垃圾桶里吧~,看看Callback是什么
Callback是什么
在jQuery中, hide的方法大概是這樣子的
$(selector).hide(speed,callback)
使用的時(shí)候,
$('#element').hide(1000, function() {
// callback function
});
我們只需要在里面寫一個(gè)簡(jiǎn)單的函數(shù)
$('#element').hide(1000, function() {
console.log('Hide');
});
有一個(gè)小小的注釋在這其中:Callback 函數(shù)在當(dāng)前動(dòng)畫 100% 完成之后執(zhí)行。然后我們就可以看到真正的現(xiàn)象,當(dāng)id為element的元素隱藏后,會(huì)在console中輸出Hide。
就也就意味著:
Callback實(shí)際上是,當(dāng)一個(gè)函數(shù)執(zhí)行完后,現(xiàn)執(zhí)行的那個(gè)函數(shù)就是所謂的callback函數(shù)。
Callback作用
正常情況下函數(shù)都是按順序執(zhí)行的,然而Javascript是一個(gè)事件驅(qū)動(dòng)的語(yǔ)言。
function hello(){
console.log('hello');
}
function world(){
console.log('world');
}
hello();
world();
所以正常情況下都會(huì)按順序執(zhí)行的,然而當(dāng)執(zhí)行world事件的時(shí)間比較長(zhǎng)時(shí)。
function hello(){
setTimeout( function(){
console.log( 'hello' );
}, 1000 );
}
function world(){
console.log('world');
}
hello();
world();
那么這個(gè)時(shí)候就不是這樣的,這時(shí)會(huì)輸出world,再輸出hello,故而我們需要callback。
Callback實(shí)例
一個(gè)簡(jiǎn)單地例子如下
function add_callback(p1, p2 ,callback) {
var my_number = p1 + p2;
callback(my_number);
}
add_callback(5, 15, function(num){
console.log("call " + num);
});
在例子中我們有一個(gè)add_callback的函數(shù),接收三個(gè)參數(shù):前兩個(gè)是要相加的兩個(gè)參數(shù),第三個(gè)參數(shù)是回調(diào)函數(shù)。當(dāng)函數(shù)執(zhí)行時(shí),返回相加結(jié)果,并在控制臺(tái)中輸出'call 20'。
- JS回調(diào)函數(shù) callback的理解與使用案例分析
- JavaScript callback回調(diào)函數(shù)用法實(shí)例分析
- Node.js 異步編程之 Callback介紹(一)
- JavaScript中使用Callback控制流程介紹
- 理解javascript中的回調(diào)函數(shù)(callback)
- JavaScript加強(qiáng)之自定義callback示例
- JavaScript回調(diào)(callback)函數(shù)概念自我理解及示例
- Js callBack 返回前一頁(yè)的js方法
- JavaScript回調(diào)函數(shù)callback用法解析
相關(guān)文章
JavaScript canvas實(shí)現(xiàn)跟隨鼠標(biāo)事件
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(xiàn)跟隨鼠標(biāo)事件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-02-02
JavaScript新手必看之var在for循環(huán)中的坑
var這個(gè)關(guān)鍵字在JS當(dāng)中是相當(dāng)常用的,但同時(shí)配合到for循環(huán)的話會(huì)出現(xiàn)不符合預(yù)期的運(yùn)行結(jié)果,所以本文就來(lái)為大家講講如何避免這種情況的出現(xiàn)2023-05-05
js實(shí)現(xiàn)圖片拖動(dòng)改變順序附圖
需要改變多個(gè)元素的位置,可以通過元素拖動(dòng)來(lái)實(shí)現(xiàn),下面以圖片拖動(dòng)為例,用jQuery來(lái)實(shí)現(xiàn),需要的朋友可以參考下2014-05-05
借助script進(jìn)行Http跨域請(qǐng)求:JSONP實(shí)現(xiàn)原理及代碼
script元素的src屬性能設(shè)置URL并發(fā)起HTTP GET請(qǐng)求實(shí)現(xiàn)腳本操作HTTP可以跨域通信而不受限與同源策略,接下來(lái)為大家詳細(xì)介紹下Http跨域請(qǐng)求實(shí)現(xiàn),感興趣的你可以參考下哈2013-03-03
JS實(shí)現(xiàn)鼠標(biāo)箭頭變成一個(gè)燃燒燭光效果的方法
這篇文章主要介紹了JS實(shí)現(xiàn)鼠標(biāo)箭頭變成一個(gè)燃燒燭光效果的方法,實(shí)例分析了javascript操作鼠標(biāo)事件及圖片的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
JS實(shí)現(xiàn)文件動(dòng)態(tài)順序載入的方法
這篇文章主要介紹了JS實(shí)現(xiàn)文件動(dòng)態(tài)順序載入的方法,實(shí)例分析了基于Mootools框架實(shí)現(xiàn)動(dòng)態(tài)載入的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
JavaScript正則表達(dá)式校驗(yàn)與遞歸函數(shù)實(shí)際應(yīng)用實(shí)例解析
這篇文章主要介紹了JavaScript正則表達(dá)式校驗(yàn)與遞歸函數(shù)實(shí)際應(yīng)用,需要的朋友可以參考下2017-08-08

