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 相关文章推荐
javascript mouseover、mouseout停止事件冒泡的解决方案
Apr 07 Javascript
浅析js中的浮点型运算问题
Jan 06 Javascript
小结Node.js中非阻塞IO和事件循环
Sep 18 Javascript
JavaScript设计模式经典之工厂模式
Feb 24 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
Dec 15 Javascript
Bootstrap中datetimepicker使用小结
Dec 28 Javascript
详解javascript立即执行函数表达式IIFE
Feb 13 Javascript
详解webpack打包第三方类库的正确姿势
Oct 20 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
Jun 03 Javascript
浅析JavaScript 函数柯里化
Sep 08 Javascript
三剑客:offset、client和scroll还傻傻分不清?
Dec 04 Javascript
JS相册图片抖动放大展示效果的示例代码
Jan 29 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
一个用php3编写的简单计数器
2006/10/09 PHP
比较时间段一与时间段二是否有交集的php函数
2011/05/31 PHP
setcookie中Cannot modify header information-headers already sent by错误的解决方法详解
2013/05/08 PHP
php限制文件下载速度的代码
2015/10/20 PHP
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
javascript dom 操作详解 js加强
2009/07/13 Javascript
jQuery1.5.1 animate方法源码阅读
2011/04/05 Javascript
禁止空格提交表单的js代码
2013/11/17 Javascript
在JS中解析HTML字符串示例代码
2014/04/16 Javascript
jQuery实现图片上传和裁剪插件Croppie
2015/11/29 Javascript
javascript九宫格图片随机打乱位置的实现方法
2017/03/15 Javascript
node.js操作MongoDB的实例详解
2017/10/11 Javascript
JavaScript创建对象的四种常用模式实例分析
2019/01/11 Javascript
VUE实现密码验证与提示功能
2019/10/18 Javascript
Vue 中 filter 与 computed 的区别与用法解析
2019/11/21 Javascript
toString.call()通用的判断数据类型方法示例
2020/08/28 Javascript
[04:32]玩具屠夫中文语音节选
2020/08/23 DOTA
python中使用urllib2伪造HTTP报头的2个方法
2014/07/07 Python
Python中使用PyHook监听鼠标和键盘事件实例
2014/07/18 Python
Python smallseg分词用法实例分析
2015/05/28 Python
TensorFlow实现MLP多层感知机模型
2018/03/09 Python
PYTHON基础-时间日期处理小结
2018/05/05 Python
远程部署工具Fabric详解(支持Python3)
2019/07/04 Python
Python Django 页面上展示固定的页码数实现代码
2019/08/21 Python
在python中利用dict转json按输入顺序输出内容方式
2020/02/27 Python
Python venv虚拟环境配置过程解析
2020/07/08 Python
利用Python优雅的登录校园网
2020/10/21 Python
Crabtree & Evelyn英国官网:瑰珀翠护手霜、香水、沐浴和身体护理
2018/04/26 全球购物
JAVA招聘远程笔试题
2015/07/23 面试题
庆祝教师节活动方案
2014/01/31 职场文书
差生评语大全
2014/05/04 职场文书
质量承诺书怎么写
2014/05/24 职场文书
毕业生个人总结
2015/02/28 职场文书
公司财务经理岗位职责
2015/04/08 职场文书
海上钢琴师观后感
2015/06/03 职场文书
Python获取指定日期是"星期几"的6种方法
2022/03/13 Python