JavaScript回调函数callback用法解析


Posted in Javascript onJanuary 14, 2020

这篇文章主要介绍了JavaScript回调函数callback用法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

JavaScript回调函数的使用是很常见的,引用官方回调函数的定义:

A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.

解释得很明确,回调函数就是作为参数传递给另一个函数并在其父函数完成后执行的函数。

听起来似乎有点不好理解,所以还是举例进行说明,介绍回调函数之前先简单说明一下同步和异步,前端也有同步和异步。同步和异步总得来说,两者最明显的区别就是是否需要等待,如果是串行执行的就是同步机制,是并行执行的就是异步机制,这个比较好理解

回调函数的使用并没有同步和异步的区别,回调函数只是一种特殊的函数,可以应用于同步调用场景,也可以应用于异步调用场景

异步请求中的回调函数

最常用的有ajax异步调用或者事件机制,例子:

$.get('${root}/saveOrUpdate.do',function(result){
      alert(result);
      });

同步请求中的回调函数

业务场景:举个例子,点击按钮会触发main函数,进行接口数据保存(异步方式),数据保存成功之后,再回调打开弹窗的函数

保存数据函数:

function saveRecord(seq,callback){
  $.ajax({
      url:'${root}/saveOrUpdate.do',
      type:"post",
      async:true,
      success:function(result){
        //确保callback是一个函数类型的
        if(typeof(callback)==='function'){
            callback(true);
        }
      }
    }); 
}

main函数

//保存成功,才会打开弹窗
  function main(seq){
    saveRecord(seq,callbackFunction);
  }

回调函数,数据保存成功后再调用

/*保存时的回调函数*/
   function callbackFunction(saveSuccess){
    if(saveSuccess){
      //省略打开弹窗代码
    }
   }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
prototype 1.5相关知识及他人笔记
Dec 16 Javascript
JS URL传中文参数引发的乱码问题
Sep 02 Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
Mar 12 Javascript
jquery仿百度经验滑动切换浏览效果
Apr 14 Javascript
jquery ui resize 中border-box的bug修正
Apr 26 Javascript
js实现滑动触屏事件监听的方法
May 05 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
Oct 22 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
Jul 12 Javascript
vue实现ToDoList简单实例
Feb 07 Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 Javascript
iview中Select 选择器多选校验方法
Mar 15 Javascript
[原创]微信小程序获取网络类型的方法示例
Mar 01 Javascript
JS document对象简单用法完整示例
Jan 14 #Javascript
JS document内容及样式操作完整示例
Jan 14 #Javascript
微信小程序indexOf的替换方法(推荐)
Jan 14 #Javascript
小程序中设置缓存过期的实现方法
Jan 14 #Javascript
ES6实现图片切换特效代码
Jan 14 #Javascript
vue项目创建步骤及路由router
Jan 14 #Javascript
JS实现容器模块左右拖动效果
Jan 14 #Javascript
You might like
PHP下10件你也许并不了解的事情
2008/09/11 PHP
如何使用Strace调试工具
2013/06/03 PHP
PHP 下载文件时如何自动添加bom头及解释BOM头和去掉bom头的方法
2016/01/04 PHP
完美解决phpdoc导出文档中@package的warning及Error的错误
2016/05/17 PHP
使用Yii2实现主从数据库设置
2016/11/20 PHP
yii2中关于加密解密的那些事儿
2018/06/12 PHP
php中对象引用和复制实例分析
2019/08/14 PHP
关于javascript 回调函数中变量作用域的讨论
2009/09/11 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
2013/04/26 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
2014/12/16 Javascript
如何编写高质量JS代码
2014/12/28 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
2015/12/01 Javascript
NodeJS和BootStrap分页效果的实现代码
2016/11/07 NodeJs
微信小程序遇到修改数据后页面不渲染的问题解决
2017/03/09 Javascript
微信小程序实现锚点定位楼层跳跃的实例
2017/05/18 Javascript
详解NodeJs开发微信公众号
2018/05/25 NodeJs
如何使node也支持从url加载一个module详解
2018/06/05 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
2019/06/17 Javascript
JavaScript 反射和属性赋值实例解析
2019/10/28 Javascript
ES2020 新特性(种草)
2020/01/12 Javascript
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
2020/05/03 Javascript
vue制作toast组件npm包示例代码
2020/10/29 Javascript
[40:48]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第二局
2016/02/28 DOTA
以Python的Pyspider为例剖析搜索引擎的网络爬虫实现方法
2015/03/30 Python
深入讲解Python编程中的字符串
2015/10/14 Python
浅谈Python中的可变对象和不可变对象
2017/07/07 Python
解决python文件字符串转列表时遇到空行的问题
2017/07/09 Python
Django之模板层的实现代码
2019/09/09 Python
美国南部最大的家族百货公司:Belk
2017/01/30 全球购物
机械工程系毕业生求职信
2013/09/27 职场文书
西式婚礼主持词
2014/03/13 职场文书
社会治安综合治理管理责任书
2014/04/16 职场文书
书法大赛策划方案
2014/06/04 职场文书
小学优秀教师先进事迹材料
2014/12/16 职场文书
SpringBoot生成License的实现示例
2021/06/16 Java/Android
服务器间如何实现文件共享
2022/05/20 Servers