快捷導(dǎo)航

js回調(diào)函數(shù)原理與用法案例分析

更新時(shí)間：2020年03月04日 11:06:46 作者：葉落森

這篇文章主要介紹了js回調(diào)函數(shù)原理與用法,結(jié)合具體案例形式分析了js回調(diào)函數(shù)基本概念、原理、使用方法及操作注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了js回調(diào)函數(shù)原理與用法。分享給大家供大家參考，具體如下：

回調(diào)函數(shù)就是一個(gè)通過(guò)函數(shù)指針調(diào)用的函數(shù)。如果你把函數(shù)的指針（地址）作為參數(shù)傳遞給另一個(gè)函數(shù)，當(dāng)這個(gè)指針被用來(lái)調(diào)用其所指向的函數(shù)時(shí)，我們就說(shuō)這是回調(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)是指針變量，只不過(guò)該指針變量指向函數(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指向沒(méi)指向到vue，那么就可以用回調(diào)函數(shù)來(lái)實(shí)現(xiàn)它的iview的this.$Message效果。（當(dāng)然這是很傻的。this指向沒(méi)指向到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)容可查看本站專(zhuān)題：《JavaScript常用函數(shù)技巧匯總》、《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: