js自定义回调函数


Posted in Javascript onDecember 13, 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));
  });
}

这里写图片描述
这里写图片描述

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

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

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

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

到此回调结束,希望对大家学习有帮助,小编也对js自定义回调函数有了更深入的了解。

Javascript 相关文章推荐
javascript的事件描述
Sep 08 Javascript
jquery随意添加移除html的实现代码
Jun 21 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
Jan 02 Javascript
省市联动效果的简单实现代码(推荐)
Jun 06 Javascript
JavaScript中日期函数的相关操作知识
Aug 03 Javascript
AngularJS入门教程之过滤器用法示例
Nov 02 Javascript
JS多文件上传的实例代码
Jan 11 Javascript
Reactjs实现通用分页组件的实例代码
Jan 19 Javascript
加载 vue 远程代码的组件实例详解
Nov 20 Javascript
详解vue 单页应用(spa)前端路由实现原理
Apr 04 Javascript
vue源码解析之事件机制原理
Apr 21 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
Jun 26 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
Dec 13 #Javascript
分享Javascript实用方法二
Dec 13 #Javascript
JavaScript判断按钮被点击的方法
Dec 13 #Javascript
jquery插件uploadify实现带进度条的文件批量上传
Dec 13 #Javascript
JavaScript代码判断点击第几个按钮
Dec 13 #Javascript
JavaScript模块化开发之SeaJS
Dec 13 #Javascript
node.js require() 源码解读
Dec 13 #Javascript
You might like
多文件上载系统完整版
2006/10/09 PHP
dedecms防止FCK乱格式化你的代码的修改方法
2007/03/17 PHP
php-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
PHP不用递归遍历目录下所有文件的代码
2014/07/04 PHP
php获取指定数量随机字符串的方法
2017/02/06 PHP
PHP receiveMail实现收邮件功能
2018/04/25 PHP
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
2012/03/01 Javascript
JS的千分位算法实现思路
2013/07/31 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
2013/12/28 Javascript
基于jQuery实现动态数字展示效果
2015/08/12 Javascript
jquery移动端TAB触屏切换实现效果
2020/12/22 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
2015/12/20 Javascript
Extjs4.0 ComboBox如何实现三级联动
2016/05/11 Javascript
js学习之----深入理解闭包
2016/11/21 Javascript
js实现自定义路由
2017/02/04 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
2017/02/13 Javascript
js仿微博动态栏功能
2017/02/22 Javascript
Vue组件通信之Bus的具体使用
2017/12/28 Javascript
vue中父子组件注意事项,传值及slot应用技巧
2018/05/09 Javascript
基于React Native 0.52实现轮播图效果
2020/08/25 Javascript
vue中v-text / v-html使用实例代码详解
2019/04/02 Javascript
[01:18:43]2014 DOTA2华西杯精英邀请赛5 24 iG VS DK
2014/05/25 DOTA
[46:25]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第二局
2016/03/05 DOTA
[00:59]DOTA2荣耀之路1:Doom is back!weapon X!
2018/05/22 DOTA
如何准确判断请求是搜索引擎爬虫(蜘蛛)发出的请求
2015/10/13 Python
Python实现的自定义多线程多进程类示例
2018/03/23 Python
利用Django提供的ModelForm增删改数据的方法
2019/01/06 Python
Tensorflow之梯度裁剪的实现示例
2020/03/08 Python
医药销售自荐书
2014/05/29 职场文书
中层干部考核评语
2015/01/04 职场文书
2016年春季运动会加油稿
2015/07/22 职场文书
品德与社会教学反思
2016/02/24 职场文书
MySQL Shell的介绍以及安装
2021/04/24 MySQL
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript
Python天气语音播报小助手
2021/09/25 Python
详解Flutter网络请求Dio库的使用及封装
2022/04/14 Java/Android