1. 程式人生 > 程式設計 >js回撥函式原理與用法案例分析

js回撥函式原理與用法案例分析

本文例項講述了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程式設計有所幫助。