JavaScript回調(diào)(callback)函數(shù)概念自我理解及示例
更新時(shí)間：2013年07月04日 15:37:38 作者：
此文適合JavaScript入門級(jí)選手閱讀，在JavaScript里什么叫Callback“回調(diào)函數(shù)”，把方法b當(dāng)做一個(gè)參數(shù)傳遞個(gè)方法a，當(dāng)方法a執(zhí)行完后執(zhí)行另外一個(gè)指定函數(shù)（這里是b函數(shù)），感興趣的朋友可以了解下哈
此文適合JavaScript入門級(jí)選手閱讀，高手就可以飄過了。
先扯點(diǎn)閑話。在中國，有這么一種現(xiàn)象：不管什么詞或者概念，總會(huì)有些人把這些東西解釋的神乎其神，貌似搞得別人聽不懂就覺得自己很厲害的樣子。其實(shí)不知道有多2。我個(gè)人比較崇尚簡潔明了。什么詞，什么概念，如果你能用簡短的一兩句話讓大家聽明白，這才是本事。好了，閑話不扯了，進(jìn)入正題。
在JavaScript里什么叫Callback“回調(diào)函數(shù)”，用我的話來講就是把方法b當(dāng)做一個(gè)參數(shù)傳遞個(gè)方法a，當(dāng)方法a執(zhí)行完后執(zhí)行另外一個(gè)指定函數(shù)（這里是b函數(shù)）。來看個(gè)列子：
<html>
<head>
<title>Callback function test</title>
<script language="javascript" type="text/javascript">
function main(callback)
{
alert("I am main function");
alert("Invoke callback function..");
callback();
}
function b(){
alert("I am callback function: b");
}
function c(){
alert("I am callback function: c");
}
function test() {
main(b);
main(c);
}
</script>
</head>
<body>
<button onClick="test()">click me</button>
</body>
</html>
這里面main（b），那么b就稱作回調(diào)函數(shù)，是不是很好理解？那有人會(huì)說我為什么不可以把b的調(diào)用放到main函數(shù)里呢？確實(shí)可以，但是那樣你的main方法就只能調(diào)用b了。這里我們將b傳遞個(gè)main，或者a傳遞個(gè)main，那main里面的callback方法就是動(dòng)態(tài)的回調(diào)函數(shù)。優(yōu)點(diǎn)就在這里。
先扯點(diǎn)閑話。在中國，有這么一種現(xiàn)象：不管什么詞或者概念，總會(huì)有些人把這些東西解釋的神乎其神，貌似搞得別人聽不懂就覺得自己很厲害的樣子。其實(shí)不知道有多2。我個(gè)人比較崇尚簡潔明了。什么詞，什么概念，如果你能用簡短的一兩句話讓大家聽明白，這才是本事。好了，閑話不扯了，進(jìn)入正題。
在JavaScript里什么叫Callback“回調(diào)函數(shù)”，用我的話來講就是把方法b當(dāng)做一個(gè)參數(shù)傳遞個(gè)方法a，當(dāng)方法a執(zhí)行完后執(zhí)行另外一個(gè)指定函數(shù)（這里是b函數(shù)）。來看個(gè)列子：
復(fù)制代碼 代碼如下:
<html>
<head>
<title>Callback function test</title>
<script language="javascript" type="text/javascript">
function main(callback)
{
alert("I am main function");
alert("Invoke callback function..");
callback();
}
function b(){
alert("I am callback function: b");
}
function c(){
alert("I am callback function: c");
}
function test() {
main(b);
main(c);
}
</script>
</head>
<body>
<button onClick="test()">click me</button>
</body>
</html>
這里面main（b），那么b就稱作回調(diào)函數(shù)，是不是很好理解？那有人會(huì)說我為什么不可以把b的調(diào)用放到main函數(shù)里呢？確實(shí)可以，但是那樣你的main方法就只能調(diào)用b了。這里我們將b傳遞個(gè)main，或者a傳遞個(gè)main，那main里面的callback方法就是動(dòng)態(tài)的回調(diào)函數(shù)。優(yōu)點(diǎn)就在這里。
相關(guān)文章
js合并數(shù)組對(duì)象代碼實(shí)現(xiàn)(將數(shù)組中具有相同屬性對(duì)象合并到一起組成一個(gè)新數(shù)組)
項(xiàng)目過程中經(jīng)常會(huì)遇到JS數(shù)組合并的情況,時(shí)常為這個(gè)糾結(jié),這篇文章主要給大家介紹了關(guān)于js合并數(shù)組對(duì)象(將數(shù)組中具有相同屬性對(duì)象合并到一起組成一個(gè)新數(shù)組)的相關(guān)資料,需要的朋友可以參考下2024-01-01
本文主要介紹了聊一聊JavaScript中的內(nèi)存泄漏，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
JavaScript懶加載與預(yù)加載原理與實(shí)現(xiàn)詳解
這篇文章主要介紹了JavaScript懶加載與預(yù)加載，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09
js實(shí)現(xiàn)對(duì)table的增加行和刪除行的操作方法
下面小編就為大家?guī)硪黄猨s實(shí)現(xiàn)對(duì)table的增加行和刪除行的操作方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
本文對(duì)JavaScript對(duì)象的屬性、對(duì)象的方法、對(duì)象的屬性、訪問對(duì)象屬性的語法進(jìn)行了實(shí)例分析介紹，有需要的朋友可以看下2016-12-12
這篇文章主要介紹了使用webpack構(gòu)建應(yīng)用的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要介紹了微信小程序的線程架構(gòu)，每個(gè)小程序包含一個(gè)描述整體程序的app實(shí)例和多個(gè)描述頁面的page，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05
javascript實(shí)現(xiàn)跟隨鼠標(biāo)移動(dòng)的圖片
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)跟隨鼠標(biāo)移動(dòng)的圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
利用js異或算法實(shí)現(xiàn)腳本加解密的代碼2008-02-02
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)列表下拉刷新上拉加載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-02-02