浅析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 相关文章推荐
JQuery操作tr和td内容的方法实例
Mar 06 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
Jun 17 Javascript
js中的for如何实现foreach中的遍历
May 31 Javascript
jQuery实现的多级下拉菜单效果代码
Aug 24 Javascript
jquery.cookie.js用法实例详解
Dec 25 Javascript
AngularJS中的Directive实现延迟加载
Jan 25 Javascript
深入理解js中的加载事件
Feb 08 Javascript
JavaScript中引用vs复制示例详析
Dec 06 Javascript
vue-router 前端路由之路由传值的方式详解
Apr 30 Javascript
Vue调用后端java接口的实例代码
Oct 28 Javascript
javascript数组的定义及操作实例
Nov 10 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
Aug 10 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
使用 eAccelerator加速PHP代码的目的
2007/03/16 PHP
PHP里的中文变量说明
2011/07/23 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
PHP实现通过二维数组键值获取一维键名操作示例
2019/10/11 PHP
js png图片(有含有透明)在IE6中为什么不透明了
2010/02/07 Javascript
jquery select多选框的左右移动 具体实现代码
2013/07/03 Javascript
javascript日期对象格式化为字符串的实现方法
2014/01/14 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
JS产生随机数的用法小结
2016/12/10 Javascript
JS搜狐面试题分析
2016/12/16 Javascript
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
swiper 解决动态加载数据滑动失效的问题
2018/02/26 Javascript
jQuery插件Validation表单验证详解
2018/05/26 jQuery
jQuery 点击获取验证码按钮及倒计时功能
2018/09/20 jQuery
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
2018/10/12 Javascript
el-form 多层级表单的实现示例
2020/09/10 Javascript
将图片文件嵌入到wxpython代码中的实现方法
2014/08/11 Python
在Python中操作日期和时间之gmtime()方法的使用
2015/05/22 Python
详解Python中的Cookie模块使用
2015/07/06 Python
Python 实现简单的shell sed替换功能(实例讲解)
2017/09/29 Python
Python中Numpy包的安装与使用方法简明教程
2018/07/03 Python
Python实用技巧之利用元组代替字典并为元组元素命名
2018/07/11 Python
python实现flappy bird小游戏
2018/12/24 Python
YUV转为jpg图像的实现
2019/12/09 Python
python 实现压缩和解压缩的示例
2020/09/22 Python
读书心得体会
2013/12/28 职场文书
大学生职业生涯设计书
2014/01/02 职场文书
海飞丝广告词
2014/03/20 职场文书
留学经费担保书
2014/05/12 职场文书
酒店开业策划方案
2014/06/02 职场文书
技术员岗位职责范本
2015/04/11 职场文书
业务内勤岗位职责
2015/04/13 职场文书
公司考勤管理制度
2015/08/04 职场文书
CSS实现渐变色边框(Gradient borders)的5种方法
2022/03/25 HTML / CSS
python中filter,map,reduce的作用
2022/06/10 Python
PostgreSQL怎么创建分区表详解
2022/06/25 PostgreSQL