浅析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 相关文章推荐
Javascript 通过json自动生成Dom的代码
Apr 01 Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
Oct 26 Javascript
javascript 快速排序函数代码
May 30 Javascript
js实现的常用的左侧导航效果
Oct 17 Javascript
简介JavaScript中fixed()方法的使用
Jun 08 Javascript
jQuery插件实现无缝滚动特效
Nov 24 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
Dec 16 Javascript
微信小程序开发之实现自定义Toast弹框
Jun 08 Javascript
vue如何根据网站路由判断页面主题色详解
Nov 02 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
Jan 19 Javascript
vue-router实现编程式导航的代码实例
Jan 19 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
Mar 06 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
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
PHP 如何利用phpexcel导入数据库
2013/08/24 PHP
php远程下载类分享
2016/04/13 PHP
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
IE6下focus与blur错乱的解决方案
2011/07/31 Javascript
JS的千分位算法实现思路
2013/07/31 Javascript
使用纯javascript实现经典扫雷游戏
2015/04/23 Javascript
js enter键激发事件实例代码
2016/08/17 Javascript
Three.js快速入门教程
2016/09/09 Javascript
微信小程序 canvas API详解及实例代码
2016/10/08 Javascript
微信小程序 video组件详解
2016/10/25 Javascript
Node.js制作简单聊天室
2017/01/12 Javascript
AngularJS实现tab选项卡的方法详解
2017/07/05 Javascript
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
swiper自定义分页器使用方法详解
2020/09/14 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
2019/07/08 Javascript
vue中移动端调取本地的复制的文本方式
2020/07/18 Javascript
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
Python单元测试简单示例
2018/07/03 Python
详解利用django中间件django.middleware.csrf.CsrfViewMiddleware防止csrf攻击
2018/10/09 Python
python实现简单遗传算法
2020/09/18 Python
python线程池 ThreadPoolExecutor 的用法示例
2020/10/10 Python
CSS3解析抖音LOGO制作的方法步骤
2019/04/11 HTML / CSS
英国最大的独立家具零售商:Furniture Village
2016/09/06 全球购物
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
这76道Java面试题及答案,祝你能成功通过面试
2016/04/16 面试题
应用化学专业本科生求职信
2013/09/29 职场文书
财务会计人员岗位职责
2013/11/30 职场文书
学校门卫管理制度
2014/01/30 职场文书
班主任工作经验材料
2014/02/02 职场文书
农业开发项目建议书
2014/05/16 职场文书
体育教育毕业生自荐信
2014/06/29 职场文书
群众路线学习笔记范文
2014/11/06 职场文书
小升初自荐信范文
2015/03/05 职场文书
2015年敬老月活动总结
2015/03/27 职场文书
2015年建筑工程工作总结
2015/05/13 职场文书