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 相关文章推荐
js控制框架刷新
Aug 01 Javascript
JavaScript中为元素加上name属性的方法
May 09 Javascript
javascript克隆对象深度介绍
Nov 20 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
Nov 05 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
Jun 15 Javascript
jquery制作 随机弹跳的小球特效
Feb 01 Javascript
理解javascript中的闭包
Jan 11 Javascript
js实现截图保存图片功能的代码示例
Feb 16 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
Jun 28 Javascript
利用JavaScript如何查询某个值是否数组内
Jul 30 Javascript
vue项目上传Github预览的实现示例
Nov 06 Javascript
JS实现计算小于非负数n的素数的数量算法示例
Feb 26 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
一些星际专用术语解释
2020/03/04 星际争霸
百度站点地图(百度sitemap)生成方法分享
2014/01/09 PHP
PHP实现的下载远程图片自定义函数分享
2015/01/28 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
Ubuntu中支持PHP5与PHP7双版本的简单实现
2018/08/19 PHP
jquery使用ColorBox弹出图片组浏览层实例演示
2013/03/14 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
2013/11/28 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
2015/07/27 Javascript
获取JS中网页各种高宽与位置的方法总结
2016/07/27 Javascript
angularjs 源码解析之injector
2016/08/22 Javascript
简单的Vue异步组件实例Demo
2017/12/27 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
2018/08/24 Javascript
vue-router的HTML5 History 模式设置
2018/09/08 Javascript
微信上传视频文件提示(推荐)
2018/11/22 Javascript
JavaScript实现图片放大镜效果
2019/06/27 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
2019/09/25 Javascript
vue实现分页加载效果
2019/12/24 Javascript
微信小程序实现可长按移动控件
2020/11/01 Javascript
[01:25:33]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第二场 12.20
2020/12/23 DOTA
python调用windows api锁定计算机示例
2014/04/17 Python
Python中的localtime()方法使用详解
2015/05/22 Python
编写Python爬虫抓取豆瓣电影TOP100及用户头像的方法
2016/01/20 Python
通过Python爬虫代理IP快速增加博客阅读量
2016/12/14 Python
python+selenium实现京东自动登录及秒杀功能
2017/11/18 Python
python获取酷狗音乐top500的下载地址 MP3格式
2018/04/17 Python
解决python中导入win32com.client出错的问题
2019/07/26 Python
Cython编译python为so 代码加密示例
2019/12/23 Python
通过实例解析python and和or使用方法
2020/11/14 Python
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
2016/03/14 HTML / CSS
使用jquery实现HTML5响应式导航菜单教程
2014/04/02 HTML / CSS
Origins悦木之源英国官网:雅诗兰黛集团高端植物护肤品牌
2017/11/06 全球购物
大学生国家助学金感谢信
2015/01/23 职场文书
教师个人总结范文
2015/02/11 职场文书
交通事故代理词范文
2015/05/23 职场文书
指导教师推荐意见
2015/06/05 职场文书
如何在CocosCreator里画个炫酷的雷达图
2021/04/16 Javascript