浅析JS中回调函数及用法


Posted in Javascript onJuly 25, 2018

回调函数,什么是回调函数呢?很多初学者都不是很明白,感觉懵懵的,不理解,更不会用!

其实简单理解的话就是在一个函数执行完毕后,得到想要的特定数据后在去执行的函数,并没有性药中的那么高深!

function getdata(callback){
    //这里我们假设是从后端获取数据
    setTimeout(function(){
     //假设我们获取到数据info
     var info = {
      "id":1,
      "name":'张三'
     }
     //得到数据以后执行函数方法
     callback(info)//这个就是回调函数
    },1000)

上述代码就可以清除的告诉你什么是回调函数!可能你还是不太明白,这个callback是什么,他有什么作用呢?

getdata(check)
   function getdata(callback){
    //这里我们假设是从后端获取数据
    setTimeout(function(){
     //假设我们获取到数据info
     var info = {
      "id":1,
      "name":'张三'
     }
     //得到数据以后执行函数方法
     callback(info)//这个就是回调函数
    },1000)
 }
function check(data){
  if(data.id==1){
   console.log('验证成功,可以通过')
  }
}

看上面的代码,有两个方法,getdata和check,我们执行了getdata方法,并把check当做参数传给了getdata,那么这时候check就是回调函数!

那么这个回调函数有什么作用呢,怎么用呢?如果你已经理解了回调函数的意义,那么你将很好的理解他的用法,记忆怎么在实际项目中去用他!

看下面的代码,我写的一种实际应用中的用法:

//vue框架的应用,其他框架的可以自行修改!!!
//用户权限验证实例:
created(){//在这个钩子函数中取执行获取数据的方法,将验证方法作为回调传入
  getdata(check)
 }
 methods:{//在这里面,首先你得有created钩子函数中用到的那两个方法
   function getdata(callback){//向后端请求用户信息
    //这里我们假设是从后端获取数据
    setTimeout(function(){
     //假设我们获取到数据info
     var info = {
      "id":1,
      "name":'张三'
     }
     //得到数据以后执行函数方法
     callback(info)//这个就是回调函数,得到用户信息后去验证他的权限
    },1000)
 }
function check(data){//验证用户权限
  if(data.id==1){//验证权限的条件,根据实际设定
   console.log('验证成功,可以通过')//权限通过,可以做什么
  }else{
   console.log('验证失败,禁止通行')//没有权限,可以做什么
  }
}
 }

总结

以上所述是小编给大家介绍的JS中回调函数及用法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JXTree对象,读取外部xml文件数据,生成树的函数
Apr 02 Javascript
js报错 Object doesn't support this property or method的原因分析
Mar 31 Javascript
FusionCharts图表显示双Y轴双(多)曲线
Nov 22 Javascript
document.documentElement和document.body区别介绍
Sep 16 Javascript
jQuery 和 CSS 的文本特效插件集锦
Dec 12 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
Oct 30 Javascript
JavaScript数据结构与算法之集合(Set)
Jan 29 Javascript
JS实现动态增加和删除li标签行的实例代码
Oct 16 Javascript
jQuery EasyUI Panel面板组件使用详解
Feb 28 Javascript
一百行JS代码实现一个校验工具
Apr 30 Javascript
Ajax请求时无法重定向的问题解决代码详解
Jun 21 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
Jul 01 Javascript
详解使用mpvue开发github小程序总结
Jul 25 #Javascript
详解mpvue开发小程序小总结
Jul 25 #Javascript
Bootstrap table表格初始化表格数据的方法
Jul 25 #Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
Jul 24 #Javascript
微信小程序实现图片上传放大预览删除代码
Jun 28 #Javascript
vue实现底部菜单功能
Jul 24 #Javascript
vue 下列表侧滑操作实例代码详解
Jul 24 #Javascript
You might like
对盗链说再见...
2006/10/09 PHP
php摘要生成函数(无乱码)
2012/02/04 PHP
PHP获取用户的浏览器与操作系统信息的代码
2012/09/04 PHP
ThinkPHP3.2.3数据库设置新特性
2015/03/05 PHP
PHP封装返回Ajax字符串和JSON数组的方法
2017/02/17 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
thinkPHP5框架设置404、403等http状态页面的方法
2018/06/05 PHP
JsDom 编程小结
2011/08/09 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
2013/01/20 Javascript
jQuery控制输入框只能输入数值的小例子
2013/03/20 Javascript
js转义字符介绍
2013/11/05 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
2015/11/18 Javascript
基于javascript实现泡泡大冒险网页版小游戏
2016/03/23 Javascript
jQuery 操作input中radio的技巧
2016/07/18 Javascript
jQuery简单设置文本框回车事件的方法
2016/08/01 Javascript
JS实现的简易拖放效果示例
2016/12/29 Javascript
jQuery实现可兼容IE6的滚动监听功能
2017/09/20 jQuery
小程序页面动态配置实现方法
2019/02/05 Javascript
JS实现继承的几种常用方式示例
2019/06/22 Javascript
vue中的mescroll搜索运用及各种填坑处理
2019/10/30 Javascript
让你30分钟快速掌握vue3教程
2020/10/26 Javascript
Python部署web开发程序的几种方法
2017/05/05 Python
python实现的接收邮件功能示例【基于网易POP3服务器】
2019/09/11 Python
Django将默认的SQLite更换为MySQL的实现
2019/11/18 Python
浅谈SciPy中的optimize.minimize实现受限优化问题
2020/02/29 Python
python matplotlib imshow热图坐标替换/映射实例
2020/03/14 Python
使用Python获取爱奇艺电视剧弹幕数据的示例代码
2021/01/12 Python
美国马匹用品和骑马配件购物网站:Horse.com
2018/01/08 全球购物
Python中如何定义一个函数
2016/09/06 面试题
企业晚会策划方案
2014/05/29 职场文书
承诺书模板
2014/08/30 职场文书
先进班组事迹材料
2014/12/25 职场文书
公司开会通知
2015/04/20 职场文书
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL
Pygame Event事件模块的详细示例
2021/11/17 Python
frg-100简单操作(设置)说明
2022/04/05 无线电