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 相关文章推荐
jquery $.fn $.fx是什么意思有什么用
Nov 04 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
Oct 16 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
May 14 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
Sep 27 Javascript
深入解析JavaScript的闭包机制
Oct 20 Javascript
Html中 IFrame的用法及注意点
Dec 22 Javascript
jquery横向纵向鼠标滚轮全屏切换
Feb 27 Javascript
Vue Spa切换页面时更改标题的实例代码
Jul 15 Javascript
Javascript之图片的延迟加载的实例详解
Jul 24 Javascript
从零开始封装自己的自定义Vue组件
Oct 09 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
Sep 19 Javascript
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
在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
laravel migrate初学常见错误的解决方法
2017/10/11 PHP
laravel 数据验证规则详解
2019/10/23 PHP
JS DOM 操作实现代码
2010/08/01 Javascript
用javascript将数据导入Excel示例代码
2014/09/10 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
Javascript获取background属性中url的值
2016/10/17 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
React/Redux应用使用Async/Await的方法
2017/11/16 Javascript
jQuery图片加载失败替换默认图片方法汇总
2017/11/29 jQuery
JavaScript调用模式与this关键字绑定的关系
2018/04/21 Javascript
jQuery实现基本隐藏与显示效果的方法详解
2018/09/05 jQuery
angular 实现同步验证器跨字段验证的方法
2019/04/11 Javascript
layui对工具条进行选择性的显示方法
2019/09/19 Javascript
微信小程序实现拖拽功能
2019/09/26 Javascript
ES6 Promise对象概念及用法实例详解
2019/10/15 Javascript
微信小程序实现一个简单swiper代码实例
2019/12/30 Javascript
vue实现tab栏点击高亮效果
2020/08/19 Javascript
[01:15]PWL S2开团时刻第二期——他们杀 我就白给
2020/11/25 DOTA
python中__slots__用法实例
2015/06/04 Python
python爬虫 使用真实浏览器打开网页的两种方法总结
2018/04/21 Python
对python3 一组数值的归一化处理方法详解
2018/07/11 Python
python实现朴素贝叶斯算法
2018/11/19 Python
pycharm修改界面主题颜色的方法
2019/01/17 Python
python 常见的反爬虫策略
2020/09/27 Python
澳大利亚最受欢迎的美发用品目的地:AMR
2019/08/28 全球购物
Electric官网:美国高级眼镜和配件品牌
2020/06/04 全球购物
毕业生写求职信的要点
2014/03/04 职场文书
英语专业自荐书
2014/06/13 职场文书
民主评议党员总结
2014/10/20 职场文书
领导班子整改措施
2014/10/24 职场文书
升职感谢信
2015/01/22 职场文书
2015年生产车间工作总结
2015/04/22 职场文书
企业安全隐患排查治理制度
2015/08/05 职场文书
2016优秀大学生个人事迹材料范文
2016/03/01 职场文书
Matplotlib可视化之添加让统计图变得简单易懂的注释
2021/06/11 Python
JS创建或填充任意长度数组的小技巧汇总
2021/10/24 Javascript