浅析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动态调整iframe高度的方法
Mar 06 Javascript
基于jquery的返回顶部效果(兼容IE6)
Jan 17 Javascript
JQuery实现简单验证码提示解决方案
Dec 20 Javascript
jQuery选择器中含有空格的使用示例及注意事项
Aug 25 Javascript
利用了jquery的ajax实现二级联互动菜单
Dec 02 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
jquery中val()方法是从最后一个选项往前读取的
Sep 06 Javascript
jQuery中用on绑定事件时需注意的事项
Mar 19 Javascript
Vue中的v-for指令不起效果的解决方法
Sep 27 Javascript
JavaScript字符和ASCII实现互相转换
Jun 03 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
Sep 04 Javascript
解决Vue大括号字符换行踩的坑
Nov 09 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
zf框架db类的分页示例分享
2014/03/14 PHP
php检测useragent版本示例
2014/03/24 PHP
PHP版本升级到7.x后wordpress的一些修改及wordpress技巧
2015/12/25 PHP
PHP创建word文档的方法(平台无关)
2016/03/29 PHP
利用PHP抓取百度阅读的方法示例
2016/12/18 PHP
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
2014/04/29 Javascript
javascript计时器详解
2015/02/28 Javascript
JavaScript实现获得所有兄弟节点的方法
2015/07/23 Javascript
对象题目的一个坑 理解Javascript对象
2015/12/22 Javascript
Jquery on方法绑定事件后执行多次的解决方法
2016/06/02 Javascript
JS 对java返回的json格式的数据处理方法
2016/12/05 Javascript
Jquery on绑定的事件 触发多次实例代码
2016/12/08 Javascript
Javascript中的神器——Promise
2017/02/08 Javascript
js for循环倒序输出数组元素的实例
2017/03/01 Javascript
vue 自定义全局方法,在组件里面的使用介绍
2018/02/28 Javascript
分析javascript原型及原型链
2018/03/18 Javascript
解决循环中setTimeout执行顺序的问题
2018/06/20 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
2020/04/13 Javascript
vue实现在进行增删改操作后刷新页面
2020/08/05 Javascript
[00:55]2015国际邀请赛中国区预选赛5月23日——28日约战上海
2015/05/25 DOTA
Python中的面向对象编程详解(上)
2015/04/13 Python
Python检测网络延迟的代码
2018/05/15 Python
Laravel+Dingo/Api 自定义响应的实现
2019/02/17 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
pandas之分组groupby()的使用整理与总结
2020/06/18 Python
HTML5本地存储之IndexedDB
2017/06/16 HTML / CSS
Crocs美国官方网站:卡骆驰洞洞鞋
2017/08/04 全球购物
What is EJB
2016/07/22 面试题
动物科学专业毕业生的自我评价
2013/11/29 职场文书
群众路线教育实践活动心得体会
2014/03/07 职场文书
一岗双责责任书
2014/04/15 职场文书
董事长秘书工作职责
2014/06/10 职场文书
法定代表人授权委托书
2014/09/19 职场文书
通讯稿范文
2015/07/22 职场文书
驾驶员管理制度范本
2015/08/06 职场文书
SQL 尚未定义空闲 CPU 条件 - OnIdle 作业计划将不起任何作用
2021/06/30 SQL Server