浅析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 相关文章推荐
json数据处理技巧(字段带空格、增加字段、排序等等)
Jun 14 Javascript
JS增加行复制行删除行的实现代码
Nov 09 Javascript
JS数组的遍历方式for循环与for...in
Jul 31 Javascript
jQuery Easyui datagrid/treegrid 清空数据
Jul 09 Javascript
js改变html的原有内容实现方法
Oct 05 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
Nov 24 Javascript
JavaScript中清空数组的方法总结
Dec 02 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
Dec 20 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
Jul 04 Javascript
tween.js缓动补间动画算法示例
Feb 13 Javascript
说说Vue.js中的functional函数化组件的使用
Feb 12 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
Jun 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
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
通过JAVAScript实现页面自适应
2007/01/19 Javascript
Cookie 注入是怎样产生的
2009/04/08 Javascript
jQuery设置div一直在页面顶部显示的方法
2013/10/24 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
js图片闪动特效可以控制间隔时间如几分钟闪动一下
2014/08/12 Javascript
jquery中map函数遍历数组用法实例
2015/05/18 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
2016/12/20 Javascript
js时间戳和c#时间戳互转方法(推荐)
2017/02/15 Javascript
几行js代码实现自适应
2017/02/24 Javascript
详解node.js搭建代理服务器请求数据
2017/04/08 Javascript
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
2018/09/14 Javascript
Javascript删除数组里的某个元素
2019/02/28 Javascript
vue 实现强制类型转换 数字类型转为字符串
2019/11/07 Javascript
Vue 中获取当前时间并实时刷新的实现代码
2020/05/12 Javascript
vue移动端的左右滑动事件详解
2020/06/17 Javascript
Vue Elenent实现表格相同数据列合并
2020/11/30 Vue.js
JavaScript实现页面高亮操作提示和蒙板
2021/01/04 Javascript
[00:20]TI9观赛名额抽取Ⅱ
2019/07/24 DOTA
python实现爬虫下载漫画示例
2014/02/16 Python
Python基于Tkinter的HelloWorld入门实例
2015/06/17 Python
Python探索之SocketServer详解
2017/10/28 Python
简单了解Django应用app及分布式路由
2019/07/24 Python
Pycharm中出现ImportError:DLL load failed:找不到指定模块的解决方法
2019/09/17 Python
Selenium结合BeautifulSoup4编写简单的python爬虫
2020/11/06 Python
学生个人自我鉴定
2014/03/26 职场文书
情人节寄语大全
2014/04/11 职场文书
高中班主任评语大全
2014/04/25 职场文书
俞敏洪励志演讲稿
2014/04/29 职场文书
毕业生工作求职信
2014/06/30 职场文书
国际语言毕业生求职信
2014/07/08 职场文书
法院个人总结
2015/03/03 职场文书
地道战观后感
2015/06/04 职场文书
公司车辆维修管理制度
2015/08/05 职场文书
Python 机器学习工具包SKlearn的安装与使用
2021/05/14 Python