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编程起步(第五课)
Feb 27 Javascript
IE7提供XMLHttpRequest对象为兼容
Mar 08 Javascript
Javascript中克隆一个数组的实现代码
Dec 06 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
Apr 16 Javascript
JavaScript取得键盘按下方向键是哪个的方法
Aug 04 Javascript
jQuery实现动态添加和删除一个div
Aug 12 Javascript
Angular Js文件上传之form-data
Aug 28 Javascript
JavaScript继承模式粗探
Jan 12 Javascript
功能强大的jquery.validate表单验证插件
Nov 07 Javascript
JS常见构造模式实例对比分析
Aug 27 Javascript
vue+element项目中过滤输入框特殊字符小结
Aug 07 Javascript
JavaScript闭包相关知识解析
Oct 19 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
评分9.0以上的动画电影,剧情除了经典还很燃
2020/03/04 日漫
PHP-CGI进程CPU 100% 与 file_get_contents 函数的关系分析
2011/08/15 PHP
php中mysql连接方式PDO使用详解
2015/02/25 PHP
php从数据库查询结果生成树形列表的方法
2015/04/17 PHP
php通过获取头信息判断图片类型的方法
2015/06/26 PHP
JS 动态加载脚本的4种方法
2009/05/05 Javascript
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
2009/10/26 Javascript
window resize和scroll事件的基本优化思路
2014/04/29 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
2014/10/26 Javascript
jQuery插件zepto.js简单实现tab切换
2015/06/16 Javascript
Bootstrap每天必学之缩略图与警示窗
2015/11/29 Javascript
javascript实现网页端解压并查看zip文件
2015/12/15 Javascript
利用React-router+Webpack快速构建react程序
2016/10/27 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
Vue.js实现价格计算器功能
2020/03/30 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
jQuery实现判断上传图片类型和大小的方法示例
2018/04/11 jQuery
在vscode里使用.vue代码模板的方法
2018/04/28 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
Vue+axios实现统一接口管理的方法
2018/07/23 Javascript
Element-UI中Upload上传文件前端缓存处理示例
2019/02/21 Javascript
React组件设计模式之组合组件应用实例分析
2020/04/29 Javascript
python3实现跳一跳点击跳跃
2018/01/08 Python
Python 网络编程之UDP发送接收数据功能示例【基于socket套接字】
2019/10/11 Python
利用Tensorboard绘制网络识别准确率和loss曲线实例
2020/02/15 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
Python新手如何进行闭包时绑定变量操作
2020/05/29 Python
Python中的__init__作用是什么
2020/06/09 Python
美体小铺瑞典官方网站:The Body Shop瑞典
2018/01/27 全球购物
数学专业推荐信范文
2013/11/21 职场文书
大班开学家长寄语
2014/04/04 职场文书
司法所长先进事迹
2014/06/02 职场文书
责任书格式范文
2014/07/28 职场文书
2014年文员工作总结
2014/11/18 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
奖金申请报告模板
2015/05/15 职场文书