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

这篇文章主要介绍了js回调函数原理与用法,结合具体案例形式分析了js回调函数基本概念、原理、使用方法及操作注意事项,需要的朋友可以参考下

本文实例讲述了js回调函数原理与用法。分享给大家供大家参考,具体如下:

回调函数就是一个通过函数指针调用的函数。如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,我们就说这是回调函数。回调函数不是由该函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,用于对该事件或条件进行响应。

函数指针是指向函数的指针变量。 因此“函数指针”本身首先应是指针变量,只不过该指针变量指向函数。

函数指针有两个用途:调用函数和做函数的参数。

作用:

js代码会至上而下一条线执行下去,但是有时候我们需要等到一个操作结束之后再进行下一个操作,这时候就需要用到回调函数。

基本案例:

 

项目中的案例:

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.0133.cn/code/HtmlJsRun测试上述代码运行效果。

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

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

以上就是js回调函数原理与用法案例分析的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » JavaScript 教程