谈谈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操作xml
Nov 04 Javascript
基于jQuery的星级评分插件
Aug 12 Javascript
jquery弹出层类代码分享
Dec 27 Javascript
影响jQuery使用的14个方面
Sep 01 Javascript
JavaScript中的数值范围介绍
Dec 29 Javascript
JS定义网页表单提交(submit)的方法
Mar 20 Javascript
JQuery显示隐藏页面元素的方法总结
Apr 16 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
Sep 27 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
vue车牌号校验和银行校验实战
Jan 23 Javascript
理理Vue细节(推荐)
Apr 16 Javascript
react antd表格中渲染一张或多张图片的实例
Oct 28 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
高分R级DC动画剧《哈莉·奎茵》第二季正式预告首发
2020/04/09 欧美动漫
多重?l件?合查?(一)
2006/10/09 PHP
PHP的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
php新建文件的方法实例
2019/09/26 PHP
JavaScript window.setTimeout() 的详细用法
2009/11/04 Javascript
javascript 解析url的search方法
2010/02/09 Javascript
jQuery使用技巧简单汇总
2013/04/18 Javascript
JS自动适应的图片弹窗实例
2013/06/29 Javascript
使用jQuery将多条数据插入模态框的实现代码
2014/10/08 Javascript
jQuery实现简单的间隔向上滚动效果
2015/03/09 Javascript
JavaScript DOM事件(笔记)
2015/04/08 Javascript
javascript实现表单提交后,提交按钮不可用的方法
2015/04/18 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
2015/12/20 Javascript
微信小程序 页面传参实例详解
2016/11/16 Javascript
jQuery validate 验证radio实例
2017/03/01 Javascript
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
微信小程序HTTP接口请求封装代码实例
2019/09/05 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
2020/03/24 Javascript
vue 验证两次输入的密码是否一致的方法示例
2020/09/29 Javascript
python检测远程udp端口是否打开的方法
2015/03/14 Python
python的变量与赋值详细分析
2017/11/08 Python
Python深度优先算法生成迷宫
2018/01/22 Python
利用Python正则表达式过滤敏感词的方法
2019/01/21 Python
python基于SMTP协议发送邮件
2019/05/31 Python
Python模拟登录之滑块验证码的破解(实例代码)
2019/11/18 Python
ansible动态Inventory主机清单配置遇到的坑
2020/01/19 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
eBay瑞士购物网站:eBay.ch
2018/12/24 全球购物
作为网站管理者应当如何防范XSS
2014/08/16 面试题
入团者的自我评价分享
2013/12/02 职场文书
上学迟到的检讨书
2014/01/11 职场文书
2014年绩效考核工作总结
2014/12/11 职场文书
2015年教师业务工作总结
2015/05/26 职场文书
物资采购管理制度
2015/08/06 职场文书
Linux系统下MySQL配置主从分离的步骤
2022/03/21 MySQL