JavaScript回调函数callback用法解析

 更新时间:2020年01月14日 10:40:32   作者:smileNicky  
这篇文章主要介绍了JavaScript回调函数callback用法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

这篇文章主要介绍了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中数据结构与算法(四):串(BF)

    JavaScript中数据结构与算法(四):串(BF)

    这篇文章主要介绍了JavaScript中数据结构与算法(四):串(BF),串是由零个或多个字符组成的有限序列,又叫做字符串,本文着重讲解了BF(Brute Force)算法,需要的朋友可以参考下
    2015-06-06
  • js简单获取表单中单选按钮值的方法

    js简单获取表单中单选按钮值的方法

    这篇文章主要介绍了js简单获取表单中单选按钮值的方法,涉及javascript针对form表单元素的遍历与查找相关操作技巧,需要的朋友可以参考下
    2016-08-08
  • mpvue 页面预加载新增preLoad生命周期的两种方式

    mpvue 页面预加载新增preLoad生命周期的两种方式

    这篇文章主要介绍了mpvue 页面预加载新增preLoad生命周期的两种方式,本文重点给大家讲解了第一种方式,需要的朋友可以参考下
    2019-10-10
  • 让bootstrap的carousel支持滑动滚屏的实现代码

    让bootstrap的carousel支持滑动滚屏的实现代码

    这篇文章主要介绍了让bootstrap的carousel支持滑动滚屏的实现代码,需要的朋友可以参考下
    2017-11-11
  • 使用微信小程序开发弹出框应用实例详解

    使用微信小程序开发弹出框应用实例详解

    本文通过实例代码给大家介绍了使用微信小程序开发弹出框功能,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-10-10
  • React中使用外部样式的3种方式(小结)

    React中使用外部样式的3种方式(小结)

    这篇文章主要介绍了React中使用外部样式的3种方式(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 适用于javascript开发者的Processing.js入门教程

    适用于javascript开发者的Processing.js入门教程

    这篇文章主要介绍了适用于javascript开发者的Processing.js入门教程,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • JavaScript 巧学巧用

    JavaScript 巧学巧用

    本文主要给大家分享一下在编写JavaScript代码的时候存在的一些方法和技巧,虽然有时候条条大路都通向罗马,但是也许总会有那么一条最短的路径可走。希望通过以下几点JavaScript技巧让大家的代码“化繁为简,化简为精”
    2017-05-05
  • 原生js实现的金山打字小游戏(实例代码详解)

    原生js实现的金山打字小游戏(实例代码详解)

    这篇文章主要介绍了原生js实现的金山打字小游戏,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • react native 仿微信聊天室实例代码

    react native 仿微信聊天室实例代码

    这篇文章主要介绍了react native 仿微信聊天室实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09

最新评论