JS回調(diào)函數(shù)原理與用法詳解【附PHP回調(diào)函數(shù)】
本文實(shí)例講述了JS回調(diào)函數(shù)原理與用法。分享給大家供大家參考,具體如下:
JS回調(diào)函數(shù)
何為回調(diào)函數(shù),官方解釋:當(dāng)程序跑起來時(shí),一般情況下,應(yīng)用程序(application program)會(huì)時(shí)常通過API調(diào)用庫里所預(yù)先備好的函數(shù)。但是有些庫函數(shù)(library function)卻要求應(yīng)用先傳給它一個(gè)函數(shù),好在合適的時(shí)候調(diào)用,以完成目標(biāo)任務(wù)。這個(gè)被傳入的、后又被調(diào)用的函數(shù)就稱為回調(diào)函數(shù)(callback function)。
通常將一個(gè)函數(shù)B傳入另一個(gè)函數(shù)A,并且在需要的時(shí)候再調(diào)用函數(shù)A。
說白了,回調(diào)就是回溯,先定義好將要使用的函數(shù)體,然后在使用使再調(diào)用這個(gè)函數(shù),我們通常把callback作為一個(gè)參數(shù)傳入先定義的那個(gè)函數(shù)。下面我們先來看一段jquery代碼:
$("p").hide(1000,function(){ alert("The paragraph is now hidden"); });
上面jquery就是一個(gè)回調(diào)函數(shù),首先它在執(zhí)行完hide效果后,接著調(diào)用function回調(diào)函數(shù)。
我們?cè)賮砜匆欢蜫S代碼,看看回調(diào)函數(shù)是如何實(shí)現(xiàn)的:
function Buy(name,goods1,callback) { alert(name+' buy '+goods1); if(callback&&typeof(callback)==="function") callback(); } Buy('xiaoming','apple',function(){ alert("shopping finish"); });
一個(gè)很簡(jiǎn)單的代碼,一開始不知道要買啥,等到買到東西,立即把之前定義好的函數(shù)調(diào)用出來,最好加上判斷規(guī)則,因?yàn)橐磺星疤崾莄allback必須是一個(gè)函數(shù),輸出結(jié)果為:
xiaoming buy apple
shopping finish
閉包與回調(diào)
下面看一道閉包的題目,分別點(diǎn)擊第一個(gè)和第四個(gè)節(jié)點(diǎn),執(zhí)行結(jié)果:
var nodes = document.getElementsByTagName('button'); for (var i = 0; i < nodes.length; i++) { nodes[i].addEventListener('click', function() { console.log('You clicked element #' + i); }); }
這里雖然主要考的是閉包,addEventListener是一個(gè)閉包,而匿名函數(shù)是一個(gè)回調(diào)函數(shù),i是在閉包中的變量。在addEventListener的回調(diào)執(zhí)行時(shí),循環(huán)已經(jīng)結(jié)束,此時(shí)的變量i被賦值為node.length,node.length為總節(jié)點(diǎn)數(shù)。所以結(jié)果就是
You clicked element # node.length
那要怎么改,將其返回值改成函數(shù),既然i變量的值會(huì)被釋放,那我們就引入i,讓每次循環(huán)的值都保存在內(nèi)存中,就可以了:
var nodes = document.getElementsByTagName('button'); for (var i = 0; i < nodes.length; i++) { (function(i) { nodes[i].addEventListener('click', function () { console.log('You clicked element #' + i); }) })(i); }
PHP回調(diào)函數(shù)
下面略說一下php中回調(diào)函數(shù)如何實(shí)現(xiàn)(結(jié)果為1,2,3,4):
<?php $array=array(1,2,3,4); array_walk($array,function($value){ echo $value;}); ?>
php對(duì)每個(gè)傳入的數(shù)組元素作回調(diào)處理,下面再看看php的閉包,使用use關(guān)鍵字繼承作用域外的變量:
<?php function getcouter(){ $i=0 return function() use($i)( echo $i; )}; } $counter=getcounter(); echo $counter(); echo $counter(); ?>
返回結(jié)果為:
1,1
1
官方php使用方法
class hello { function callback($a,$b) { echo "$a,$b"; } static function callback($c,$d){ echo "$c,$d"; } } //將類名作為參數(shù) call_user_func(array('hello','callback'),"hello","world"); //輸出 hello,world //將對(duì)象作為參數(shù) call_user_func(array(new hello(),'callback'),"hello","world"); //將靜態(tài)方法作為參數(shù) call_user_func(hello::callback,"hello","world"); //輸出 hello,world
其實(shí)就原理來說,JS和php都是差不多的,都是先定義好函數(shù),然后需要的時(shí)候就調(diào)用過來。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題:《JavaScript常用函數(shù)技巧匯總》、《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- PHP將回調(diào)函數(shù)作用到給定數(shù)組單元的方法
- PHP回調(diào)函數(shù)簡(jiǎn)單用法示例
- PHP回調(diào)函數(shù)及匿名函數(shù)概念與用法詳解
- PHP回調(diào)函數(shù)概念與用法實(shí)例分析
- PHP回調(diào)函數(shù)與匿名函數(shù)實(shí)例詳解
- PHP中call_user_func_array回調(diào)函數(shù)的用法示例
- PHP 使用MySQL管理Session的回調(diào)函數(shù)詳解
- PHP 的異常處理、錯(cuò)誤的拋出及回調(diào)函數(shù)等面向?qū)ο蟮腻e(cuò)誤處理方法
- php回調(diào)函數(shù)處理數(shù)組操作示例
相關(guān)文章
echarts同一頁面中四個(gè)圖表切換的js數(shù)據(jù)交互方法示例
這篇文章主要給大家介紹了關(guān)于echarts同一頁面中四個(gè)圖表切換的js數(shù)據(jù)交互的相關(guān)資料,文中給出了完整的示例代碼供大家參考學(xué)習(xí),對(duì)大家的學(xué)習(xí)或者工作具有一定的幫助,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07javascript學(xué)習(xí)隨筆(使用window和frame)的技巧
javascript學(xué)習(xí)隨筆(使用window和frame)的技巧...2007-03-03JS實(shí)現(xiàn)根據(jù)詳細(xì)地址獲取經(jīng)緯度功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)根據(jù)詳細(xì)地址獲取經(jīng)緯度功能,涉及javascript與百度地圖接口交互進(jìn)行地址經(jīng)緯度查詢的相關(guān)操作技巧,需要的朋友可以參考下2019-04-04JS多個(gè)異步請(qǐng)求 按順序執(zhí)行next實(shí)現(xiàn)解析
這篇文章主要介紹了js多個(gè)異步請(qǐng)求 按順序執(zhí)行next實(shí)現(xiàn)解析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09最好用的Bootstrap fileinput.js文件上傳組件
這篇文章主要為大家詳細(xì)介紹了最好用的Bootstrap fileinput.js文件上傳組件的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12