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 相关文章推荐
[Web]防止用户复制页面内容和另存页面的方法
Feb 06 Javascript
图片连续滚动代码[兼容IE/firefox]
Jun 11 Javascript
ext 列表页面关于多行查询的办法
Mar 25 Javascript
基于jQuery实现的水平和垂直居中的div窗口
Aug 08 Javascript
jquery自定义函数的多种方法
Jan 09 Javascript
纯js写的分页表格数据为json串
Feb 18 Javascript
jquery实现网页的页面平滑滚动效果代码
Nov 02 Javascript
使用javascript插入样式
Mar 14 Javascript
如何用JS判断两个数字的大小
Jul 21 Javascript
详解Vue 2.0封装axios笔记
Jun 22 Javascript
微信小程序 同步请求授权的详解
Aug 04 Javascript
node跨域转发 express+http-proxy-middleware的使用
May 31 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
解析strtr函数的效率问题
2013/06/26 PHP
PHP实现简易blog的制作
2016/10/24 PHP
Yii框架批量插入数据扩展类的简单实现方法
2017/05/23 PHP
php根据地址获取百度地图经纬度的实例方法
2019/09/03 PHP
php设计模式之适配器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
再谈IE中Flash控件的自动激活 ObjectWrap
2007/03/09 Javascript
完整显示当前日期和时间的JS代码
2007/09/17 Javascript
js实时监听文本框状态的方法
2011/04/26 Javascript
js中的前绑定和后绑定详解
2013/08/01 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
2013/11/12 Javascript
jQuery实现简单的日期输入格式化控件
2015/03/12 Javascript
jQuery实现鼠标划过添加和删除class的方法
2015/06/26 Javascript
简单介绍JavaScript中字符串创建的基本方法
2015/07/07 Javascript
详解JavaScript中数组的相关知识
2015/07/29 Javascript
AngularJS Bootstrap详细介绍及实例代码
2016/07/28 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
js 获取html5的data属性实现方法
2017/07/28 Javascript
ES6中字符串string常用的新增方法小结
2017/11/07 Javascript
详解webpack模块化管理和打包工具
2018/04/21 Javascript
vue+element tabs选项卡分页效果
2020/06/29 Javascript
javascript中的相等操作符(==与===区别)
2019/12/21 Javascript
在antd中setFieldsValue和defaultVal的用法
2020/10/29 Javascript
Django返回json数据用法示例
2016/09/18 Python
Python判断变量是否为Json格式的字符串示例
2017/05/03 Python
Python如何应用cx_Oracle获取oracle中的clob字段问题
2019/08/27 Python
matplotlib.pyplot.plot()参数使用详解
2020/07/28 Python
Stuart Weitzman欧盟:美国奢华鞋履品牌
2017/05/24 全球购物
即将毕业大学生自荐信
2014/01/24 职场文书
计算机科学系职业生涯规划书
2014/03/08 职场文书
企业承诺书格式
2014/05/21 职场文书
2014年医院工作总结
2014/11/20 职场文书
幼儿园感谢信
2015/01/21 职场文书
2015年煤矿工作总结
2015/04/28 职场文书
2015年路政工作总结
2015/05/22 职场文书
妈妈再爱我一次观后感
2015/06/08 职场文书
微信小程序中使用vant框架的具体步骤
2022/02/18 Javascript