浅析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 select常用操作控制代码
Mar 16 Javascript
使用js正则控制input标签只允许输入的值
Jul 29 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
Dec 04 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
Mar 28 Javascript
Js获取图片原始宽高的实现代码
May 17 Javascript
深入理解ECMAScript的几个关键语句
Jun 01 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
AngularJS页面带参跳转及参数解析操作示例
Jun 28 Javascript
ionic2懒加载配置详解
Sep 01 Javascript
原生JS上传大文件显示进度条 php上传文件代码
Mar 27 Javascript
vue+koa2实现session、token登陆状态验证的示例
Aug 30 Javascript
vue组件是如何解析及渲染的?
Jan 13 Vue.js
详解使用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将会员数据导入到ucenter的代码
2010/07/18 PHP
CI框架学习笔记(二) -入口文件index.php
2014/10/27 PHP
解决phpcms更换javascript的幻灯片代码调用图片问题
2014/12/26 PHP
一个完整的php文件上传类实例讲解
2015/10/27 PHP
php生成Android客户端扫描可登录的二维码
2016/05/13 PHP
DWR实现模拟Google搜索效果实现原理及代码
2013/01/30 Javascript
使用javascript控制cookie显示和隐藏背景图
2014/02/12 Javascript
Javascript中封装window.open解决不兼容问题
2014/09/28 Javascript
nodejs中实现sleep功能实例
2015/03/24 NodeJs
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
2016/11/23 Javascript
BootStrap3中模态对话框的使用
2017/01/06 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
2017/04/20 Javascript
angularjs $http调用接口的方式详解
2018/08/13 Javascript
vue获取form表单的值示例
2019/10/29 Javascript
浅析vue中的provide / inject 有什么用处
2019/11/10 Javascript
JavaScript实现简单计算器
2020/03/19 Javascript
Node.js web 应用如何封装到Docker容器中
2020/09/01 Javascript
[02:24]DOTA2亚洲邀请赛 NAVI战队出场宣传片
2015/02/07 DOTA
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
python获取多线程及子线程的返回值
2017/11/15 Python
通过Python模块filecmp 对文件比较的实现方法
2018/06/29 Python
Python使用pymongo模块操作MongoDB的方法示例
2018/07/20 Python
python判断变量是否为int、字符串、列表、元组、字典的方法详解
2020/02/13 Python
基于Python实现视频的人脸融合功能
2020/06/12 Python
Python迭代器协议及for循环工作机制详解
2020/07/14 Python
html5如何在Canvas中实现自定义路径动画示例
2017/09/18 HTML / CSS
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
中软Java笔试题
2012/11/11 面试题
几道Java和数据库的面试题
2013/05/30 面试题
函授本科自我鉴定
2014/02/04 职场文书
团委竞选演讲稿
2014/04/24 职场文书
教师远程培训心得体会
2016/01/09 职场文书
找规律教学反思
2016/02/23 职场文书
《暗黑破坏神2:重制版》本周进行第一轮A测 目前可官网进行申请报名
2021/04/07 其他游戏
css filter和getUserMedia的联合使用
2022/02/24 HTML / CSS