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的IE和Firefox兼容性汇编(zz)
Feb 02 Javascript
javascript同步Import,同步调用外部js的方法
Jul 08 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
Oct 10 Javascript
jquery实现input输入框实时输入触发事件代码
Jan 28 Javascript
Bootstrap字体图标无法正常显示的解决方法
Oct 08 Javascript
微信小程序 网络API Websocket详解
Nov 09 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
Feb 27 Javascript
详解vue嵌套路由-params传递参数
May 23 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
Apr 12 Javascript
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
浅析vue-router实现原理及两种模式
Feb 11 Javascript
JS pushlet XMLAdapter适配器用法案例解析
Oct 16 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
PHP开启gzip页面压缩实例代码
2010/03/11 PHP
PHP YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
初识ThinkPHP控制器
2016/04/07 PHP
PHP实现阿里大鱼短信验证的实例代码
2017/07/10 PHP
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
2012/06/14 Javascript
js移除事件 js绑定事件实例应用
2012/11/28 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
2013/02/25 Javascript
实现只能输入数字的input不用replace方法
2013/09/12 Javascript
jquery操作HTML5 的data-*的用法实例分享
2014/08/17 Javascript
用console.table()调试javascript
2014/09/04 Javascript
JQuery实现动态添加删除评论的方法
2015/05/18 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
2015/08/12 Javascript
jQuery中的基本选择器用法学习教程
2016/04/14 Javascript
深入理解js generator数据类型
2016/08/16 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
Vue2.x中的Render函数详解
2017/05/30 Javascript
vue+swiper实现侧滑菜单效果
2017/12/28 Javascript
Vue精简版风格指南(推荐)
2018/01/30 Javascript
vue.js做一个简单的编辑菜谱功能
2018/05/08 Javascript
[02:12]Dota 2 推出全新英雄—— 电炎绝手
2019/08/23 DOTA
[01:18]PWL开团时刻DAY4——圣剑与抢盾
2020/11/03 DOTA
python语言使用技巧分享
2016/05/31 Python
Python循环语句中else的用法总结
2016/09/11 Python
python文件选择对话框的操作方法
2019/06/27 Python
简单介绍python封装的基本知识
2019/08/10 Python
纯CSS3代码实现switch滑动开关按钮效果
2016/08/30 HTML / CSS
Book Depository亚太地区:一家领先的国际图书零售商
2019/05/05 全球购物
捷克家具销售网站:SCONTO Nábytek
2020/01/02 全球购物
Farfetch巴西官网:奢侈品牌时尚购物平台
2020/10/19 全球购物
解释一下ruby中的特殊方法与特殊类
2013/02/26 面试题
护理专业个人求职简历的自我评价
2013/10/13 职场文书
竞选大队委员演讲稿
2014/04/28 职场文书
导游欢送词
2015/01/31 职场文书
2015年父亲节活动总结
2015/02/12 职场文书
2015年行政执法工作总结
2015/05/23 职场文书
单位接收证明格式
2015/06/18 职场文书