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 相关文章推荐
ExtJs默认的字体大小改变的几种方法(自己整理)
Apr 18 Javascript
javascript中attribute和property的区别详解
Jun 05 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
Dec 09 Javascript
JS控制按钮10秒钟后可用的方法
Dec 22 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
Apr 01 Javascript
react-router4 嵌套路由的使用方法
Jul 24 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
Oct 02 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
Jul 13 Javascript
Vue组件间的通信pubsub-js实现步骤解析
Mar 11 Javascript
Vue性能优化的方法
Jul 30 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
Nov 10 Javascript
详解Vue中的自定义指令
Dec 07 Vue.js
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
为什么《星际争霸》是测试人工智能的理想战场
2019/12/03 星际争霸
PHP小技巧搜集,每个PHPer都来露一手
2007/01/02 PHP
php处理带有中文URL的方法
2016/07/11 PHP
Yii2实现增删改查后留在当前页的方法详解
2017/01/13 PHP
ThinkPHP3.2.3框架Memcache缓存使用方法实例总结
2019/04/15 PHP
服务器端的JavaScript脚本 Node.js 使用入门
2012/03/07 Javascript
javaScript对文字按照拼音排序实现代码
2013/12/27 Javascript
jquery绑定事件不生效的解决方法
2014/02/11 Javascript
jquery 隐藏与显示tr标签示例代码
2014/06/06 Javascript
Bootstrap Table使用方法详解
2016/08/01 Javascript
jquery实现input框获取焦点的方法
2017/02/06 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
2017/03/28 Javascript
React进阶学习之组件的解耦之道
2017/08/07 Javascript
JavaScript监听手机物理返回键的两种解决方法
2017/08/14 Javascript
JavaScript模拟实现封装的三种方式及写法区别
2017/10/27 Javascript
爬虫利器Puppeteer实战
2019/01/09 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
2019/01/15 Javascript
在weex中愉快的使用scss的方法步骤
2020/01/02 Javascript
javascrpt密码强度校验函数详解
2020/03/18 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
2020/08/31 Javascript
js实现手表表盘时钟与圆周运动
2020/09/18 Javascript
Python利用Beautiful Soup模块修改内容方法示例
2017/03/27 Python
python+opencv识别图片中的圆形
2020/03/25 Python
使用python获取csv文本的某行或某列数据的实例
2018/04/03 Python
用python编写第一个IDA插件的实例
2018/05/29 Python
python async with和async for的使用
2019/06/20 Python
python pip安装包出现:Failed building wheel for xxx错误的解决
2019/12/25 Python
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
2014/05/08 HTML / CSS
财务人员个人求职信范文
2013/12/04 职场文书
工程班组长岗位职责
2013/12/30 职场文书
客户答谢会活动方案
2014/08/31 职场文书
试用期转正后的自我评价
2014/09/21 职场文书
教师党员承诺书2015
2015/01/21 职场文书
2019新学期家长会工作计划
2019/08/21 职场文书
python 使用tkinter与messagebox写界面和弹窗
2022/03/20 Python
Golang解析JSON对象
2022/04/30 Golang