浅析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 相关文章推荐
JS实现的4种数字千位符格式化方法分享
Mar 02 Javascript
js实现缓冲运动效果的方法
Apr 10 Javascript
js强制把网址设为默认首页
Sep 29 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
Feb 19 Javascript
jQuery each函数源码分析
May 25 Javascript
jquery html5 视频播放控制代码
Nov 06 Javascript
Javascript实现base64的加密解密方法示例
Jun 27 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
Jun 30 Javascript
Angular实现响应式表单
Aug 04 Javascript
详解Angular结合zTree异步加载节点数据
Jan 20 Javascript
JavaScript变量提升和严格模式实例分析
Jan 27 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
Oct 23 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
解析Linux下Varnish缓存的配置优化
2013/06/20 PHP
PHP弹出提示框并跳转到新页面即重定向到新页面
2014/01/24 PHP
学习php设计模式 php实现访问者模式(Visitor)
2015/12/07 PHP
ThinkPHP框架下微信支付功能总结踩坑笔记
2019/04/10 PHP
jQuery源码中的chunker 正则过滤符分析
2012/07/31 Javascript
javascript生成随机大小写字母的方法
2014/02/20 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
2015/02/13 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
2015/04/06 Javascript
如何用javascript计算文本框还能输入多少个字符
2015/07/29 Javascript
五种js判断是否为整数类型方式
2015/12/03 Javascript
JavaScript来实现打开链接页面的简单实例
2016/06/02 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
2017/02/24 Javascript
JavaScript中transform实现数字翻页效果
2017/03/08 Javascript
微信小程序实现手势图案锁屏功能
2018/01/30 Javascript
vue中watch和computed的区别与使用方法
2020/08/23 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——VP
2018/04/04 DOTA
Python自动化运维之IP地址处理模块详解
2017/12/10 Python
anaconda如何查看并管理python环境
2019/07/05 Python
pandas和spark dataframe互相转换实例详解
2020/02/18 Python
django实现模型字段动态choice的操作
2020/04/01 Python
Windows+Anaconda3+PyTorch+PyCharm的安装教程图文详解
2020/04/03 Python
解决python 在for循环并且pop数组的时候会跳过某些元素的问题
2020/12/11 Python
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
为什么要用EJB
2014/04/17 面试题
升职自荐信
2013/11/28 职场文书
专科生就业求职信
2014/06/22 职场文书
群众路线教育实践活动对照检查材料思想汇报(副处级领导)
2014/10/04 职场文书
安全生产工作汇报
2014/10/28 职场文书
2014年社区卫生工作总结
2014/12/18 职场文书
评先进个人材料
2014/12/29 职场文书
离婚协议书格式
2015/01/26 职场文书
2015年设计师个人工作总结
2015/04/25 职场文书
投标单位介绍信
2015/05/05 职场文书
党风廉政承诺书2016
2016/03/25 职场文书
详解JavaScript中的执行上下文及调用堆栈
2021/04/29 Javascript
CSS几步实现赛博朋克2077风格视觉效果
2021/06/16 HTML / CSS