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 相关文章推荐
兼容IE与firefox火狐的回车事件(js与jquery)
Oct 20 Javascript
document.getElementBy("id")与$("#id")有什么区别
Sep 22 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
Feb 04 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
Apr 29 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
May 13 Javascript
JavaScript定时器实现的原理分析
Dec 06 Javascript
canvas绘制环形进度条
Feb 23 Javascript
AugularJS从入门到实践(必看篇)
Jul 10 Javascript
vue如何使用 Slot 分发内容实例详解
Sep 05 Javascript
Express本地测试HTTPS的示例代码
Jun 06 Javascript
详解js访问对象的属性和方法
Oct 25 Javascript
bootstrap datepicker的基本使用教程
Jul 09 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
在线短消息收发的程序,不用数据库
2006/10/09 PHP
php str_pad 函数使用详解
2009/01/13 PHP
php使用curl检测网页是否被百度收录的示例分享
2014/01/31 PHP
PHP分页类集锦
2014/11/18 PHP
PHP中防止SQL注入方法详解
2014/12/25 PHP
laravel请求参数校验方法
2019/10/10 PHP
javascript读取RSS数据
2007/01/20 Javascript
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
基于JQuery 的消息提示框效果代码
2011/07/31 Javascript
jquery修改属性值实例代码(设置属性值)
2014/01/06 Javascript
表单序列化与jq中的serialize使用示例
2014/02/21 Javascript
javascript插件开发的一些感想和心得
2016/02/28 Javascript
jquery简单插件制作(fn.extend)完整实例
2016/05/24 Javascript
JavaScript获取短信验证码(周期性)
2016/12/29 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
2017/01/21 Javascript
vue+axios实现登录拦截的实例代码
2017/05/22 Javascript
Vue自定义指令详解
2017/07/28 Javascript
一个Vue页面的内存泄露分析详解
2018/06/25 Javascript
vue图片上传本地预览组件使用详解
2019/02/20 Javascript
JS中多层次排序算法的实现代码
2021/01/06 Javascript
python统计一个文本中重复行数的方法
2014/11/19 Python
python清除指定目录内所有文件中script的方法
2015/06/30 Python
python Django框架实现自定义表单提交
2016/03/25 Python
Python实现递归遍历文件夹并删除文件
2016/04/18 Python
Django如何防止定时任务并发浅析
2019/05/14 Python
python对Excel的读取的示例代码
2020/02/14 Python
Python中sys模块功能与用法实例详解
2020/02/26 Python
k-means 聚类算法与Python实现代码
2020/06/01 Python
pycharm软件实现设置自动保存操作
2020/06/08 Python
Python Merge函数原理及用法解析
2020/09/16 Python
学生党员思想汇报范文
2014/01/09 职场文书
停发工资证明范本
2015/06/12 职场文书
酒店开业主持词
2015/07/02 职场文书
KTV员工管理制度
2015/08/06 职场文书
2016年国庆节假期旅游工作总结
2016/04/01 职场文书
Python快速优雅的批量修改Word文档样式
2021/05/20 Python