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

2023-07-29 20:23:03 223

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

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

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

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

作用：

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

基本案例：


functiondoSomething(callback){
//调用回调函数
callback('我','网名','叶落森');
}
functionfoo(a,b,c){
//这是回调函数
alert(a+""+b+""+c);
}
doSomething(foo);

项目中的案例：

vue项目中假设store中this指向没指向到vue，那么就可以用回调函数来实现它的iview的this.$Message效果。（当然这是很傻的。this指向没指向到vue，我们可以把vue引进store后，再newVue()就行。importVuefrom'vue' varvuethis=newVue()）

a.js

import{mapActions,mapGetters}from'vuex';
exportdefault{
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.jb51.net/code/HtmlJsRun测试上述代码运行效果。

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

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

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

热门推荐

随机推荐