浅析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 相关文章推荐
向fckeditor编辑器插入指定代码的方法
May 25 Javascript
Prototype源码浅析 String部分(四)之补充
Jan 16 Javascript
js获取网页高度(详细整理)
Dec 28 Javascript
jQuery实现html表格动态添加新行的方法
May 28 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
Mar 17 Javascript
JS+Canvas绘制时钟效果
Aug 20 Javascript
Vue.js每天必学之计算属性computed与$watch
Sep 05 Javascript
JS图片放大效果简单实现代码
Sep 08 Javascript
js放到head中失效的原因与解决方法
Mar 07 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
Jun 26 Javascript
js canvas实现星空连线背景特效
Nov 01 Javascript
微信小程序点击item使之滚动到屏幕中间位置
Mar 25 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
C# Assembly类访问程序集信息
2009/06/13 PHP
discuz程序的PHP加密函数原理分析
2011/08/05 PHP
php模拟服务器实现autoindex效果的方法
2015/03/10 PHP
windows下安装php的memcache模块的方法
2015/04/07 PHP
PHP文件读取功能的应用实例
2015/05/08 PHP
PHP Swoole异步Redis客户端实现方法示例
2019/10/24 PHP
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
2012/02/16 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
2013/09/27 Javascript
JS比较两个时间大小的简单示例代码
2013/12/20 Javascript
对之前写的jquery分页做下升级
2014/06/19 Javascript
js变量、作用域及内存详解
2014/09/23 Javascript
javascript基本类型详解
2014/11/28 Javascript
JQ实现新浪游戏首页幻灯片
2015/07/29 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
2017/08/25 Javascript
node中的密码安全(加密)
2018/09/17 Javascript
Vue路由history模式解决404问题的几种方法
2018/09/29 Javascript
vue中导出Excel表格的实现代码
2018/10/18 Javascript
跟混乱的页面弹窗说再见
2019/04/11 Javascript
JavaScript实现的联动菜单特效示例
2019/07/08 Javascript
vue学习笔记之slot插槽用法实例分析
2020/02/29 Javascript
Vue切换div显示隐藏,多选,单选代码解析
2020/07/14 Javascript
Python随机生成手机号、数字的方法详解
2017/07/21 Python
python高级特性和高阶函数及使用详解
2018/10/17 Python
Pycharm使用之设置代码字体大小和颜色主题的教程
2019/07/12 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
Django框架配置mysql数据库实现过程
2020/04/22 Python
django序列化时使用外键的真实值操作
2020/07/15 Python
德国EGOIST网店:销售畅销的设计师品牌
2017/04/18 全球购物
岗位职责的定义
2013/11/10 职场文书
学校食堂采购员岗位职责
2013/12/05 职场文书
财务会计毕业生个人求职信
2014/02/03 职场文书
文秘大学生求职信
2014/02/25 职场文书
买房协议书
2014/04/11 职场文书
见习报告格式要求
2014/11/04 职场文书
创业计划书之珠宝饰品
2019/08/26 职场文书