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 相关文章推荐
js设置组合快捷键/tabindex功能的方法
Nov 21 Javascript
JavaScript修改浏览器tab标题小技巧
Jan 06 Javascript
详解JavaScript中循环控制语句的用法
Jun 03 Javascript
基于jQuery实现select下拉选择可输入附源码下载
Feb 03 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
Apr 12 Javascript
javascript定时器取消定时器及优化方法
Jul 08 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
Apr 01 Javascript
javascript实现小型区块链功能
Apr 03 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
Apr 22 Javascript
layui 实现表单和文件上传一起传到后台的例子
Sep 16 Javascript
layui 上传文件_批量导入数据UI的方法
Sep 23 Javascript
React Native项目框架搭建的一些心得体会
May 28 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读取csc文件并输出
2015/05/21 PHP
javascript 对象的定义方法
2007/01/10 Javascript
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
Chrome中模态对话框showModalDialog返回值问题的解决方法
2010/05/25 Javascript
JSON+JavaScript处理JSON的简单例子
2013/03/20 Javascript
快速查找数组中的某个元素并返回下标示例
2013/09/03 Javascript
使用jquery自定义鼠标样式满足个性需求
2013/11/05 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
2016/06/22 Javascript
基于JavaScript实现跳转提示页面
2016/09/24 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
layui 动态设置checbox 选中状态的例子
2019/09/02 Javascript
vue+layui实现select动态加载后台数据的例子
2019/09/20 Javascript
es6函数之尾调用优化实例分析
2020/04/25 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
2020/05/19 jQuery
[00:30]明星选手化身超级英雄!2018DOTA2亚洲邀请赛全明星赛来临!
2018/04/06 DOTA
python中requests模块的使用方法
2015/04/08 Python
Python与Java间Socket通信实例代码
2017/03/06 Python
python脚本爬取字体文件的实现方法
2017/04/29 Python
Python编程之变量赋值操作实例分析
2017/07/24 Python
python如何为创建大量实例节省内存
2018/03/20 Python
PyQt5每天必学之创建窗口居中效果
2018/04/19 Python
pandas每次多Sheet写入文件的方法
2018/12/10 Python
python3安装speech语音模块的方法
2018/12/24 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
对Python3之方法的覆盖与super函数详解
2019/06/26 Python
Python操作列表常用方法实例小结【创建、遍历、统计、切片等】
2019/10/25 Python
Pytorch使用PIL和Numpy将单张图片转为Pytorch张量方式
2020/05/25 Python
html5简单示例_动力节点Java学院整理
2017/07/07 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
2019/06/10 HTML / CSS
企业厂长岗位职责
2013/12/17 职场文书
求职自我推荐信
2014/06/25 职场文书
小学教师师德师风个人整改措施
2014/09/18 职场文书
财务助理岗位职责范本
2014/10/09 职场文书
2015年乡镇民政工作总结
2015/05/13 职场文书
家长意见和建议怎么写
2015/06/04 职场文书
微软Win11有哪些隐藏功能? windows11多个功能汇总
2021/11/21 数码科技