浅析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截取字符串常用方法详细整理
Oct 28 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
Jun 23 Javascript
Javascript基于AJAX回调函数传递参数实例分析
Dec 15 Javascript
AngularJS应用开发思维之依赖注入3
Aug 19 Javascript
JavaScript优化以及前段开发小技巧
Feb 02 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
Feb 13 Javascript
Node.js中的require.resolve方法使用简介
Apr 23 Javascript
值得收藏的八个常用的js正则表达式
Oct 19 Javascript
Puppeteer 爬取动态生成的网页实战
Nov 14 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
Feb 01 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
Aug 27 Javascript
JavaScript适配器模式原理与用法实例详解
Mar 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
PHP合并两个或多个数组的方法
2019/01/20 PHP
浅析PHP echo 和 print 语句
2020/06/30 PHP
jQuery validate 中文API 附validate.js中文api手册
2010/07/31 Javascript
读jQuery之二(两种扩展)
2011/06/11 Javascript
浅析JavaScript中的delete运算符
2013/11/30 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
2016/06/30 Javascript
jQuery Easyui datagrid/treegrid 清空数据
2016/07/09 Javascript
基于JS+Canves实现点击按钮水波纹效果
2016/09/15 Javascript
jQuery实现磁力图片跟随效果完整示例
2016/09/16 Javascript
求js数组的最大值和最小值的四种方法
2017/03/03 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
React styled-components设置组件属性的方法
2018/08/07 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
2019/04/14 Javascript
vue router动态路由设置参数可选问题
2019/08/21 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
2019/08/26 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
2020/07/28 Javascript
简单解决Python文件中文编码问题
2015/11/22 Python
Python算法之图的遍历
2017/11/16 Python
从CentOS安装完成到生成词云python的实例
2017/12/01 Python
Python标准库shutil用法实例详解
2018/08/13 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
Python常用扩展插件使用教程解析
2020/11/02 Python
用60行代码实现Python自动抢微信红包
2021/02/04 Python
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
2016/12/30 HTML / CSS
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
2020/06/01 HTML / CSS
英国最大的电子产品和家电零售企业:Currys PC World
2016/09/24 全球购物
Emporio Armani腕表天猫官方旗舰店:乔治·阿玛尼为年轻人设计的副线品牌
2017/07/02 全球购物
俄罗斯鲜花递送:AMF
2020/04/24 全球购物
eBay荷兰购物网站:eBay.nl
2020/06/26 全球购物
庆元旦文艺演出主持词
2014/03/27 职场文书
关于读书的演讲稿300字
2014/08/27 职场文书
公司保洁员管理制度
2015/08/04 职场文书
2019年公司快递收发管理制度模板
2019/11/20 职场文书
MySQL 外键约束和表关系相关总结
2021/06/20 MySQL
HTML 里 img 元素的 src 和 srcset 属性的区别详解
2023/05/21 HTML / CSS