浅析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介绍
Sep 28 Javascript
xml分页+ajax请求数据源+dom取结果实例代码
Oct 31 Javascript
jquery 得到当前页面高度和宽度的两个函数
Feb 21 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
Oct 29 Javascript
JavaScript插入动态样式实现代码
Feb 22 Javascript
全面理解JavaScript中的闭包
May 12 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
Sep 25 Javascript
微信小程序实现滚动消息通知
Feb 02 Javascript
解决Vue+Element ui开发中碰到的IE问题
Sep 03 Javascript
Vue基本使用之对象提供的属性功能
Apr 30 Javascript
webpack项目使用eslint建立代码规范实现
May 16 Javascript
js判断两个数组相等的5种方法
May 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
php的一个登录的类 [推荐]
2007/03/16 PHP
PHP strstr 函数判断字符串是否否存在的实例代码
2013/09/28 PHP
从wamp到xampp的升级之路
2015/04/08 PHP
php将图片文件转换成二进制输出的方法
2015/06/10 PHP
PHP+Mysql+jQuery文件下载次数统计实例讲解
2015/10/10 PHP
CentOS 7.2 下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法详解(mini版本)
2016/09/01 PHP
js用图作提交按钮或超连接
2008/03/26 Javascript
用js实现层随着内容大小动态渐变改变 推荐
2009/12/19 Javascript
JavaScript Title、alt提示(Tips)实现源码解读
2010/12/12 Javascript
JS实现一个列表中包含上移下移删除等功能
2014/09/24 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
2016/05/28 Javascript
PassWord输入框代码分享
2016/06/07 Javascript
fullpage.js全屏滚动插件使用实例
2016/09/06 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
移动设备手势事件库Touch.js使用详解
2017/08/18 Javascript
vuejs实现递归树型菜单组件
2018/01/13 Javascript
Express进阶之log4js实用入门指南
2018/02/10 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
2019/08/20 Javascript
javascript 数组精简技巧小结
2020/02/26 Javascript
[42:50]NB vs VP 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python为tornado添加recaptcha验证码功能
2014/02/26 Python
深度定制Python的Flask框架开发环境的一些技巧总结
2016/07/12 Python
python实现基于SVM手写数字识别功能
2020/05/27 Python
ubuntu环境下python虚拟环境的安装过程
2018/01/07 Python
JS设计模式之责任链模式实例详解
2018/02/03 Python
django 发送手机验证码的示例代码
2018/04/25 Python
python调用动态链接库的基本过程详解
2019/06/19 Python
手机使用python操作图片文件(pydroid3)过程详解
2019/09/25 Python
opencv-python的RGB与BGR互转方式
2020/06/02 Python
日本乐天德国站:Rakuten.de
2019/05/16 全球购物
泰国排名第一的家居用品中心:HomePro
2020/11/18 全球购物
电气工程和自动化自荐信范文
2013/12/25 职场文书
报到证丢失证明
2014/01/11 职场文书
家长会主持词
2014/03/26 职场文书
我的中国梦演讲稿500字
2014/08/19 职场文书
学生考试舞弊检讨书
2015/01/01 职场文书