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


Posted in Javascript onMarch 04, 2020

本文实例讲述了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.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

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

Javascript 相关文章推荐
javascript比较文档位置
Apr 08 Javascript
jquery mobile实现拨打电话功能的几种方法
Aug 05 Javascript
谈谈JavaScript自定义回调函数
Oct 18 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
Apr 04 Javascript
javascript实现仿百度图片的瀑布流加载效果
Apr 20 Javascript
js动态生成form 并用ajax方式提交的实现方法
Sep 09 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
Sep 21 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
vue中用 async/await 来处理异步操作
Jul 18 Javascript
JavaScript React如何修改默认端口号方法详解
Jul 28 Javascript
全网小程序接口请求封装实例代码
Nov 06 Javascript
JavaScript控制台的更多功能
Apr 28 Javascript
在pycharm中开发vue的方法步骤
Mar 04 #Javascript
Vue+Vuex实现自动登录的知识点详解
Mar 04 #Javascript
vuex入门最详细整理
Mar 04 #Javascript
JavaScript 严格模式(use strict)用法实例分析
Mar 04 #Javascript
vue 自定义组件的写法与用法详解
Mar 04 #Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
Mar 04 #Javascript
vue请求数据的三种方式
Mar 04 #Javascript
You might like
一个捕获函数输出的函数
2007/02/14 PHP
CodeIgniter配置之SESSION用法实例分析
2016/01/19 PHP
JavaScript实际应用:innerHTMl和确认提示的使用
2006/06/22 Javascript
Javascript 页面模板化很多人没有使用过的方法
2012/06/05 Javascript
Javascript合并表格中具有相同内容单元格示例
2013/08/11 Javascript
JavaScript中的数组特性介绍
2014/12/30 Javascript
Flash图片上传组件 swfupload使用指南
2015/03/14 Javascript
Node.js文件操作方法汇总
2016/03/22 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
2017/01/23 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
2017/04/24 jQuery
jQuery菜单实例(全选,反选,取消)
2017/08/28 jQuery
简单的Vue SSR的示例代码
2018/01/12 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
2018/05/21 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
2018/11/22 Javascript
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
2019/10/21 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
2019/12/02 Javascript
vue图片裁剪插件vue-cropper使用方法详解
2020/12/16 Vue.js
[06:59]DOTA2-DPC中国联赛3月7日Recap集锦
2021/03/11 DOTA
java直接调用python脚本的例子
2014/02/16 Python
Pytorch入门之mnist分类实例
2018/04/14 Python
python随机生成库faker库api实例详解
2019/11/28 Python
加拿大大码女装购物网站:Penningtons
2020/12/26 全球购物
毕业生医学检验求职信
2013/10/16 职场文书
毕业生求职的求职信
2013/12/05 职场文书
营销总监岗位职责范本
2014/02/26 职场文书
班子四风对照检查材料思想汇报
2014/09/29 职场文书
批评与自我批评总结
2014/10/17 职场文书
2014员工聘用协议书(最新版)
2014/11/24 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
教师节简报
2015/07/20 职场文书
2015年教师党员个人总结
2015/11/24 职场文书
python用海龟绘图写贪吃蛇游戏
2021/06/18 Python
关于MySQL中explain工具的使用
2023/05/08 MySQL