js回撥函式原理與用法案例分析
阿新 • • 發佈:2020-03-05
本文例項講述了js回撥函式原理與用法。分享給大家供大家參考,具體如下:
回撥函式就是一個通過函式指標呼叫的函式。如果你把函式的指標(地址)作為引數傳遞給另一個函式,當這個指標被用來呼叫其所指向的函式時,我們就說這是回撥函式。回撥函式不是由該函式的實現方直接呼叫,而是在特定的事件或條件發生時由另外的一方呼叫的,用於對該事件或條件進行響應。
函式指標是指向函式的指標變數。 因此“函式指標”本身首先應是指標變數,只不過該指標變數指向函式。
函式指標有兩個用途:呼叫函式和做函式的引數。
作用:
js程式碼會至上而下一條線執行下去,但是有時候我們需要等到一個操作結束之後再進行下一個操作,這時候就需要用到回撥函式。
基本案例:
<script language="javascript" type="text/javascript"> function doSomething(callback) { // 呼叫回撥函式 callback('我','網名','葉落森'); } function foo(a,b,c) { //這是回撥函式 alert(a + " " + b + " " + c); } doSomething(foo); </script>
專案中的案例:
vue專案中假設store中this指向沒指向到vue,那麼就可以用回撥函式來實現它的iview的this.$Message效果。(當然這是很傻的。this指向沒指向到vue,我們可以把vue引進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){//這是回撥函式 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)//呼叫回撥函式 } }); },}
感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具:http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。
更多關於JavaScript相關內容可檢視本站專題:《JavaScript常用函式技巧彙總》、《javascript面向物件入門教程》、《JavaScript錯誤與除錯技巧總結》、《JavaScript資料結構與演算法技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程式設計有所幫助。