淺析JS中回調(diào)函數(shù)及用法
回調(diào)函數(shù),什么是回調(diào)函數(shù)呢?很多初學(xué)者都不是很明白,感覺懵懵的,不理解,更不會(huì)用!
其實(shí)簡(jiǎn)單理解的話就是在一個(gè)函數(shù)執(zhí)行完畢后,得到想要的特定數(shù)據(jù)后在去執(zhí)行的函數(shù),并沒有性藥中的那么高深!
function getdata(callback){ //這里我們假設(shè)是從后端獲取數(shù)據(jù) setTimeout(function(){ //假設(shè)我們獲取到數(shù)據(jù)info var info = { "id":1, "name":'張三' } //得到數(shù)據(jù)以后執(zhí)行函數(shù)方法 callback(info)//這個(gè)就是回調(diào)函數(shù) },1000)
上述代碼就可以清除的告訴你什么是回調(diào)函數(shù)!可能你還是不太明白,這個(gè)callback是什么,他有什么作用呢?
getdata(check) function getdata(callback){ //這里我們假設(shè)是從后端獲取數(shù)據(jù) setTimeout(function(){ //假設(shè)我們獲取到數(shù)據(jù)info var info = { "id":1, "name":'張三' } //得到數(shù)據(jù)以后執(zhí)行函數(shù)方法 callback(info)//這個(gè)就是回調(diào)函數(shù) },1000) } function check(data){ if(data.id==1){ console.log('驗(yàn)證成功,可以通過') } }
看上面的代碼,有兩個(gè)方法,getdata和check,我們執(zhí)行了getdata方法,并把check當(dāng)做參數(shù)傳給了getdata,那么這時(shí)候check就是回調(diào)函數(shù)!
那么這個(gè)回調(diào)函數(shù)有什么作用呢,怎么用呢?如果你已經(jīng)理解了回調(diào)函數(shù)的意義,那么你將很好的理解他的用法,記憶怎么在實(shí)際項(xiàng)目中去用他!
看下面的代碼,我寫的一種實(shí)際應(yīng)用中的用法:
//vue框架的應(yīng)用,其他框架的可以自行修改!??! //用戶權(quán)限驗(yàn)證實(shí)例: created(){//在這個(gè)鉤子函數(shù)中取執(zhí)行獲取數(shù)據(jù)的方法,將驗(yàn)證方法作為回調(diào)傳入 getdata(check) } methods:{//在這里面,首先你得有created鉤子函數(shù)中用到的那兩個(gè)方法 function getdata(callback){//向后端請(qǐng)求用戶信息 //這里我們假設(shè)是從后端獲取數(shù)據(jù) setTimeout(function(){ //假設(shè)我們獲取到數(shù)據(jù)info var info = { "id":1, "name":'張三' } //得到數(shù)據(jù)以后執(zhí)行函數(shù)方法 callback(info)//這個(gè)就是回調(diào)函數(shù),得到用戶信息后去驗(yàn)證他的權(quán)限 },1000) } function check(data){//驗(yàn)證用戶權(quán)限 if(data.id==1){//驗(yàn)證權(quán)限的條件,根據(jù)實(shí)際設(shè)定 console.log('驗(yàn)證成功,可以通過')//權(quán)限通過,可以做什么 }else{ console.log('驗(yàn)證失敗,禁止通行')//沒有權(quán)限,可以做什么 } } }
總結(jié)
以上所述是小編給大家介紹的JS中回調(diào)函數(shù)及用法,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
JavaScript中全選、全不選、反選、無刷新刪除、批量刪除、即點(diǎn)即改入庫(kù)(在yii框架中操作)的代碼分享
這篇文章主要介紹了JavaScript中全選、全不選、反選、無刷新刪除、批量刪除、即點(diǎn)即改入庫(kù)(在yii框架中操作)的代碼分享,需要的朋友可以參考下2016-11-11JavaScript獲取ul中l(wèi)i個(gè)數(shù)的方法
這篇文章主要介紹了JavaScript獲取ul中l(wèi)i個(gè)數(shù)的方法,涉及javascript針對(duì)頁(yè)面HTML元素的獲取及屬性操作相關(guān)技巧,需要的朋友可以參考下2017-02-02jQuery Mobile動(dòng)態(tài)刷新頁(yè)面樣式的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨Query Mobile動(dòng)態(tài)刷新頁(yè)面樣式的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05僅9張思維導(dǎo)圖幫你輕松學(xué)習(xí)Javascript 就這么簡(jiǎn)單
僅9張思維導(dǎo)圖幫你輕松學(xué)習(xí)Javascript,從javascript變量、javascript運(yùn)算符、javascript函數(shù)基礎(chǔ)等多方面了解Javascript,就這么簡(jiǎn)單2016-06-06js漢字排序問題 支持中英文混排,兼容各瀏覽器,包括CHROME
這套排序機(jī)制同時(shí)兼容了IE和ff 可以實(shí)現(xiàn)所有瀏覽器下排序的統(tǒng)一哦2011-12-12javascript 三組文字間隙滾動(dòng)實(shí)例代碼
非常實(shí)用的文字間隙滾動(dòng)效果代碼2008-06-06js實(shí)現(xiàn)接收表單的值并將值拼在表單action后面的方法
這篇文章主要介紹了js實(shí)現(xiàn)接收表單的值并將值拼在表單action后面的方法,涉及JavaScript動(dòng)態(tài)操作字符串及表單元素的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_
今天在網(wǎng)上看到一篇很有意思的文章(需翻墻),解釋了幾段非常有趣的 JavaScript 代碼。你猜下面這段 JavaScript 代碼是什么意思?2011-02-02JS和Canvas實(shí)現(xiàn)圖片的預(yù)覽壓縮和上傳功能
這篇文章主要介紹了JS和Canvas實(shí)現(xiàn)圖片的預(yù)覽壓縮和上傳功能,實(shí)現(xiàn)此功能大概有兩步,第一步用戶選擇需要上傳的圖片,第二步獲取圖片資源壓縮預(yù)覽上傳,具體實(shí)現(xiàn)代碼大家參考下本文2018-03-03