谈谈JavaScript自定义回调函数


Posted in Javascript onOctober 18, 2015

废话不多说了,直接给大家贴代码了。

背景分析

首先看一段js的代码,主要实现添加的时候首先通过异步请求判断是否存在,如果不存在的话,在进行添加操作:

function add(url,data) {
 var isExited = isExited(data); 
 if(!isExited){
  addRequest(url, data); 
 }
}

当我添加一个数据的时候,我首先通过判断是否在数据库中存在(当然,如果前后台彻底分离的话,不应该前端进行业务逻辑的判断,前端只应该,用来展示数据),首先,isExited()的请求是ajax请求实现,这个是异步的,很显然,界面很有可能在没有返回结果的时候,就执行下边的函数(通常情况下是的),就使得isExited的值是undefined,这显然不是想要的,如果要实现类似的功能可以使用用回调函数实现,下边介绍一个案例。

过程如下

前台jsp界面如下:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>JS回调函数案例</title>
 <!-- Bootstrap -->
 <link href="<c:url value='/lib/bootstrap/css/bootstrap.min.css'/>" rel="stylesheet">

 <script type="text/javascript">

  /**
   * 删除的请求
   */
  function supplierDelete(element) {
   var id = element.parentNode.parentNode.cells[0].innerHTML;
   modalDeleteRequest('${pageContext.request.contextPath}/oms/supplier/remove/', id);
  }
 </script>
</head>
<body>
<!-- 顶部导航 -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="menu-nav">

</div>

<div class="container partner-table-container textFont">
 <table class="table table-striped detailTableSet">
  <caption><h2>JS回调函数案例</h2></caption>
  <br>
  <tr class="table-hover form-horizontal">
   <td class="info">123</td>
   <td class="info">123</td>
   <td class="info">123</td>
   <td class="info">123</td>
   <td class="info">123</td>
  </tr>
   <tr>
    <td>123</td>
    <td>123</td>
    <td>123</td>
    <td>123</td>
    <td>123</td>
    <td>
     <a onclick="supplierUpdate(this)">修改</a> 
     <a onclick="supplierDelete(this)">删除</a>
    </td>
   </tr>
 </table>
</div>

<!--显示成功失败的modal-->
<%@include file="/modal-custom.jsp" %>

<script src="<c:url value='/lib/jquery-1.8.3.min.js'/>"></script>
<script src="<c:url value='/lib/bootstrap/js/bootstrap.min.js'/>"></script>
<script type="text/javascript" src="<c:url value='/js/modal-operate.js'/>"></script>
</body>
</html>

主要的js代码如下:

<script type="text/javascript">

  /**
   * 删除的请求
   */
  function supplierDelete(element) {
   var id = element.parentNode.parentNode.cells[0].innerHTML;
   modalDeleteRequest('${pageContext.request.contextPath}/oms/supplier/remove/', id);
  }
 </script>

这里就是当点击按钮的时候进行删除,但是我想弹出一个确认删除对话框,如果弹出之后选择的是确认之后,才调用具体的删除方法,还有这里边引用了一个modal框(bootstrap框架),主要是用于展示弹出框信息,代码如下:

<%@ page language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!-- 模态框(Modal) -->
<div class="modal fade" id="modal-result" tabindex="-1" role="dialog"
  aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close"
      data-dismiss="modal" aria-hidden="true">
     ×
    </button>
    <h4 class="modal-title" id="myModalLabel">
     信息
    </h4>
   </div>
   <div class="modal-body" id="modal-add-result-text">
   </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-default"
      data-dismiss="modal">关闭
    </button>
   </div>
  </div>
  <!-- /.modal-content -->
 </div>
 <!-- /.modal -->
</div>

下边是今天的主角:

/**
 * 删除请求的操作
 * @param url 删除请求的url
 * @param id 删除的id
 */
function modalDeleteRequest(url, id) {
 confirmIsDelete(url, id, deleteRequest);
}
/**
 * 在删除警告框确认之后调用的回调函数
 * @param url
 * @param id
 */
function deleteRequest(url, id) {
 $.get(url + id, function (result) {
  $("#modal-add-result-text").text(result.msg);
  $("#modal-result").modal('show');
 }, "json");
}

/**
 * 弹出对话框确认是否删除
 * @param url 删除请求的url
 * @param id 删除请求的id
 * @param callback 回调函数,在最后的时候需要进行回调的函数
 */
function confirmIsDelete(url, id, callback) {
 var confirmDeleteDialog = $('<div class="modal fade"><div class="modal-dialog">'
  + '<div class="modal-content"><div class="modal-header"><button type="button" class="close" '
  + 'data-dismiss="modal" aria-hidden="true">×</button>'
  + '<h4 class="modal-title">确认删除</h4></div><div class="modal-body">'
  + '<div class="alert alert-warning">确认要删除吗?删除之后无法恢复哦!</div></div><div class="modal-footer">'
  + '<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>'
  + '<button type="button" class="btn btn-success" id="deleteOK">删除</button></div></div>'
  + '</div></div>');

 confirmDeleteDialog.modal({
  keyboard: false
 }).on({
  'hidden.bs.modal': function () {
   $(this).remove();
  }
 });

 var deleteConfirm = confirmDeleteDialog.find('#deleteOK');
 deleteConfirm.on('click', function () {
  confirmDeleteDialog.modal('hide'); //隐藏dialog
  //需要回调的函数
  callback(deleteRequest(url, id));
 });
}

谈谈JavaScript自定义回调函数

上边由于代码比较多,下边看一个简单的框架:

/**
 * 回调函数测试方法
 * 
 * @param callback
 * 回调的方法
 */
function testCallback(callback) {
 alert('come in!');
 callback();
}

/**
 * 被回调的函数
 */
function a() {
 alert('a');
}

/**
 * 开始测试方法
 */
function start() {
 testCallback(a);
}

以上内容是小编通过代码分析给大家介绍的js回调函数,希望大家喜欢。

Javascript 相关文章推荐
javascript 必知必会之closure
Sep 21 Javascript
JQuery的ajax获取数据后的处理总结(html,xml,json)
Jul 14 Javascript
jquery实现不包含当前项的选择器实例
Jun 25 Javascript
jQuery解析json数据实例分析
Nov 24 Javascript
JS函数的几种定义方式分析
Dec 17 Javascript
浅谈JavaScript 数据属性和访问器属性
Sep 01 Javascript
js 弹出虚拟键盘修改密码的简单实例
Oct 10 Javascript
详解Webpack DLL用法以及功能
Jul 11 Javascript
深入浅析Vue不同场景下组件间的数据交流
Aug 15 Javascript
AngularJS实现注册表单验证功能
Oct 16 Javascript
浅析vue.js数组的变异方法
Jun 30 Javascript
JS封装cavans多种滤镜组件
Feb 15 Javascript
JS实现的网页背景闪电闪烁效果代码
Oct 17 #Javascript
JavaScript实现点击按钮切换网页背景色的方法
Oct 17 #Javascript
JavaScript实现的背景自动变色代码
Oct 17 #Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
Oct 17 #Javascript
利用jQuery和CSS将背景图片拉伸
Oct 16 #Javascript
基于jQuery实现的菜单切换效果
Oct 16 #Javascript
javascript判断复选框是否选中的方法
Oct 16 #Javascript
You might like
PHP通过header实现文本文件下载的代码
2010/08/08 PHP
PHP制作图形验证码代码分享
2014/10/23 PHP
Yii实现自动加载类地图的方法
2015/04/01 PHP
php使用filter_var函数判断邮箱,url,ip格式示例
2019/07/06 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
php+mysql实现的无限分类方法类定义与使用示例
2020/05/27 PHP
比较搞笑的js陷阱题
2010/02/07 Javascript
DB.ASP 用Javascript写ASP很灵活很好用很easy
2011/07/31 Javascript
用客户端js实现带省略号的分页
2013/04/27 Javascript
js图片自动切换效果处理代码
2013/05/07 Javascript
DOM节点删除函数removeChild()用法实例
2015/01/12 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
Winform客户端向web地址传参接收参数的方法
2016/05/17 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
2017/12/24 Javascript
详解如何更好的使用module vuex
2019/03/27 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
2019/09/06 Javascript
vue-cli脚手架的.babelrc文件用法说明
2020/09/11 Javascript
[11:27]《一刀刀一天》之DOTA全时刻20:TI4总奖金突破920W TS赛事分析
2014/06/18 DOTA
Python实现命令行通讯录实例教程
2016/08/18 Python
python Django框架实现web端分页呈现数据
2019/10/31 Python
Python中如何添加自定义模块
2020/06/09 Python
Python不支持 i ++ 语法的原因解析
2020/07/22 Python
Homestay中文官网:全球寄宿家庭
2018/10/18 全球购物
教育英语专业毕业生的求职信
2014/03/13 职场文书
乡镇网格化管理实施方案
2014/03/23 职场文书
学校工作推荐信范文
2014/07/11 职场文书
电大奖学金获奖感言
2014/08/14 职场文书
村党的群众路线教育实践活动总结材料
2014/10/31 职场文书
师德师风事迹材料
2014/12/20 职场文书
大雁塔英文导游词
2015/02/10 职场文书
党小组鉴定意见
2015/06/02 职场文书
Nginx配置并兼容HTTP实现代码解析
2021/03/31 Servers
Laravel中获取IP的真实地理位置
2021/04/01 PHP
Redis中key的过期删除策略和内存淘汰机制
2022/04/12 Redis
如何vue使用el-table遍历循环表头和表体数据
2022/04/26 Vue.js
讲解MySQL增删改操作
2022/05/06 MySQL