js回調(diào)函數(shù)原理與用法案例分析
本文實(shí)例講述了js回調(diào)函數(shù)原理與用法。分享給大家供大家參考,具體如下:
回調(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)。
函數(shù)指針是指向函數(shù)的指針變量。 因此“函數(shù)指針”本身首先應(yīng)是指針變量,只不過該指針變量指向函數(shù)。
函數(shù)指針有兩個(gè)用途:調(diào)用函數(shù)和做函數(shù)的參數(shù)。
作用:
js代碼會(huì)至上而下一條線執(zhí)行下去,但是有時(shí)候我們需要等到一個(gè)操作結(jié)束之后再進(jìn)行下一個(gè)操作,這時(shí)候就需要用到回調(diào)函數(shù)。
基本案例:
<script language='javascript' type='text/javascript'>function doSomething(callback) { // 調(diào)用回調(diào)函數(shù) callback(’我’, ’網(wǎng)名’, ’葉落森’);}function foo(a, b, c) { //這是回調(diào)函數(shù) alert(a + ' ' + b + ' ' + c);}doSomething(foo);</script>
項(xiàng)目中的案例:
vue項(xiàng)目中假設(shè)store中this指向沒指向到vue,那么就可以用回調(diào)函數(shù)來實(shí)現(xiàn)它的iview的this.$Message效果。(當(dāng)然這是很傻的。this指向沒指向到vue,我們可以把vue引進(jìn)store后,再new Vue()就行。import Vue from ’vue’ var vuethis=new Vue())
a.js
import {mapActions, mapGetters} from ’vuex’;export default { name: ’role’, data () { return { }; }, computed: {}, methods: { ...mapActions([’getRoleData’, ’getPowerData’]), callbackFn(type,content){//這是回調(diào)函數(shù)if(type){ this.$Message.success(content)}else{ this.$Message.error({ content: content, duration: 5 })} }, initRoleId () { this.getRoleData({path:’http://www.baidu.com/’,callbackFn:this.callbackFn}); } }, mounted(){ this.initRoleId(); }};
store中的js
actions: { getRoleData ({commit}, {path,callbackFn}) { axios.get(path + ’roles’, {params: {pageSize: 500}}).then(res => {if(res.data.retCode=='200'){ commit(’ROLE_DATA’, {roleData: res.data.data.records});}else{ callbackFn(0,res.data.message)//調(diào)用回調(diào)函數(shù)} }); },}
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(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ì)有所幫助。
相關(guān)文章:
1. XML入門的常見問題(三)2. XML基本概念XPath、XSLT與XQuery函數(shù)介紹3. WML的簡(jiǎn)單例子及編輯、測(cè)試方法第1/2頁4. el-input無法輸入的問題和表單驗(yàn)證失敗問題解決5. 關(guān)于html嵌入xml數(shù)據(jù)島如何穿過樹形結(jié)構(gòu)關(guān)系的問題6. CSS3實(shí)例分享之多重背景的實(shí)現(xiàn)(Multiple backgrounds)7. 不要在HTML中濫用div8. vue實(shí)現(xiàn)復(fù)制文字復(fù)制圖片實(shí)例詳解9. XML入門的常見問題(四)10. 前端html+css實(shí)現(xiàn)動(dòng)態(tài)生日快樂代碼
