浅析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 相关文章推荐
检测是否已安装 .NET Framework 3.5的js脚本
Feb 14 Javascript
jquery1.83 之前所有与异步列队相关的模块详细介绍
Nov 13 Javascript
javascript 10进制和62进制的相互转换
Jul 31 Javascript
JavaScript极简入门教程(二):对象和函数
Oct 25 Javascript
JavaScript模拟实现继承的方法
Mar 30 Javascript
详解JavaScript中Hash Map映射结构的实现
May 21 Javascript
Node.js Streams文件读写操作详解
Jul 04 Javascript
JS实现六边形3D拖拽翻转效果的方法
Sep 11 Javascript
Node实战之不同环境下配置文件使用教程
Jan 02 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
Nov 13 Javascript
vue使用keep-alive保持滚动条位置的实现方法
Apr 09 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
Sep 24 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
多重?l件?合查?(二)
2006/10/09 PHP
Destoon实现多表查询示例
2014/08/21 PHP
PHP+jQuery+Ajax实现分页效果 jPaginate插件的应用
2015/10/09 PHP
PHP获取网站中各文章的第一张图片的代码示例
2016/05/20 PHP
PHP实现的方程求解示例分析
2016/11/11 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
Javascript学习笔记6 prototype的提出
2010/01/11 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
2013/04/24 Javascript
JS父页面与子页面相互传值方法
2014/03/05 Javascript
jQuery实用函数用法总结
2014/08/29 Javascript
原生JS实现美图瀑布流布局赏析
2015/09/07 Javascript
原生javascript实现的一个简单动画效果
2016/03/30 Javascript
Bootstrap实现弹性搜索框
2016/07/11 Javascript
ES6下React组件的写法示例代码
2017/05/04 Javascript
基于Cookie常用操作以及属性介绍
2017/09/07 Javascript
深入了解响应式React Native Echarts组件
2019/05/29 Javascript
利用d3.js实现蜂巢图表带动画效果
2019/09/03 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
2020/04/10 Javascript
python简单获取本机计算机名和IP地址的方法
2015/06/03 Python
Python连接DB2数据库
2016/08/27 Python
python 通过SSHTunnelForwarder隧道连接redis的方法
2019/02/19 Python
使用Python刷淘宝喵币(低阶入门版)
2019/10/30 Python
django中media媒体路径设置的步骤
2019/11/15 Python
Python阶乘求和的代码详解
2020/02/14 Python
Python 实现微信自动回复的方法
2020/09/11 Python
python如何实时获取tcpdump输出
2020/09/16 Python
英国莱斯特松木橡木家具网上商店:Choice Furniture Superstore
2019/07/05 全球购物
某公司.Net方向面试题
2014/04/24 面试题
儿科护理实习自我鉴定
2013/09/19 职场文书
医药代表个人求职信范本
2013/12/19 职场文书
建筑工程专业大学生求职信
2014/04/23 职场文书
离职报告范文
2014/11/04 职场文书
基于Redis实现分布式锁的方法(lua脚本版)
2021/05/12 Redis
springboot新建项目pom.xml文件第一行报错的解决
2022/01/18 Java/Android
解决Git推送错误non-fast-forward的方法
2022/06/25 Servers
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python