主页 / 网络编程 /

js回调函数原理与用法案例分析

网络编程 2021-07-04 15:02www.168986.cn编程入门
这篇文章主要介绍了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 {

    };
  },
  puted: {},
  methods: {
    ...mapActions(['getRoleData', 'getPowerData']),
      callbackFn(type,content){//这是回调函数
        if(type){
          this.$Message.suess(content)
        }else{
          this.$Message.error({
            content: content,
            duration: 5
          })
        }
      },
      initRoleId () {
         this.getRoleData({path:'http://.baidu./',callbackFn:this.callbackFn});
      }
  },
  mounted(){
    this.initRoleId();
  }
};

store中的js

actions: {
    getRoleData ({mit}, {path,callbackFn}) {
      axios.get(path + 'roles', {params: {pageSize: 500}}).then(res => {
        if(res.data.retCode=="200"){
          mit('ROLE_DATA', {roleData: res.data.data.records});
        }else{
          callbackFn(0,res.data.message)//调用回调函数
        }
      });
    },
}

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题《》、《》、《》、《》及《》

希望本文所述对大家JavaScript程序设计有所帮助。

上一篇：微信浏览器左上角返回按钮监听的实现 下一篇：JS赋值、浅拷贝和深拷贝（数组和对象的深浅拷贝

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by