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中常用表单介绍与应用
Jun 07 Javascript
js如何获取object类型里的键值
Feb 18 Javascript
js中confirm实现执行操作前弹出确认框的方法
Nov 01 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
Dec 24 Javascript
jQuery中选择器的基础使用教程
May 23 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
Jul 05 Javascript
vue-loader教程介绍
Jun 14 Javascript
使用canvas实现一个vue弹幕组件功能
Nov 30 Javascript
JavaScript设计模式之观察者模式实例详解
Jan 16 Javascript
Js和VUE实现跑马灯效果
May 25 Javascript
element中Steps步骤条和Tabs标签页关联的解决
Dec 08 Javascript
JavaScript高级程序设计之变量与作用域
Nov 17 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/02 星际争霸
php图片水印添加、压缩、剪切的封装类实现
2020/04/18 PHP
双冒号 ::在PHP中的使用情况
2015/11/05 PHP
PHP针对伪静态的注入总结【附asp与Python相关代码】
2017/08/01 PHP
PHP判断函数是否被定义的方法
2019/06/21 PHP
PHP基于openssl实现非对称加密代码实例
2020/06/19 PHP
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
2011/11/15 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
JQuery fileupload插件实现文件上传功能
2016/03/18 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
2016/05/03 Javascript
Backbone.js框架中Model与Collection的使用实例
2016/05/07 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
js字符串引用的两种方式(必看)
2016/09/18 Javascript
KnockoutJS 3.X API 第四章之click绑定
2016/10/10 Javascript
jQuery图片切换动画效果
2017/02/28 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
2017/06/09 Javascript
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
2018/05/07 Javascript
详解vue组件开发脚手架
2018/06/15 Javascript
vue给组件传递不同的值方法
2018/09/29 Javascript
[03:03]2014DOTA2西雅图国际邀请赛 Alliance战队巡礼
2014/07/07 DOTA
python文件读写操作与linux shell变量命令交互执行的方法
2015/01/14 Python
python实现telnet客户端的方法
2015/04/15 Python
Python实现快速排序算法及去重的快速排序的简单示例
2016/06/26 Python
python利用标准库如何获取本地IP示例详解
2017/11/01 Python
pandas将DataFrame的列变成行索引的方法
2018/04/10 Python
python 用for循环实现1~n求和的实例
2019/02/01 Python
Python之虚拟环境virtualenv,pipreqs生成项目依赖第三方包的方法
2019/07/23 Python
pycharm实现print输出保存到txt文件
2020/06/01 Python
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
2018/09/19 HTML / CSS
.NET初级开发工程师面试题(包括Javascript)
2012/08/22 面试题
2014年幼儿园德育工作总结
2014/12/17 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书
电工实训心得体会
2016/01/14 职场文书
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js
Elasticsearch6.2服务器升配后的bug(避坑指南)
2022/09/23 Servers