search

Home  >  Article  >  Web Front-end  >  js custom callback function_javascript skills

js custom callback function_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:25:501383browse

Background Analysis

First look at a piece of js code. When adding, first determine whether it exists through an asynchronous request. If it does not exist, add it: 

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

When I add a piece of data, I first judge whether it exists in the database (of course, if the front-end and back-end are completely separated, the front-end should not judge the business logic, the front-end should only be used to display the data), first , the request of isExited() is an ajax request implementation. This is asynchronous. Obviously, the interface is likely to execute the following function when no result is returned (usually yes), making the value of isExited undefined. , this is obviously not what you want. If you want to achieve similar functions, you can use a callback function. A case is introduced below.

The process is as follows

The front-end jsp interface is as follows: 

<%@ 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>

The main js code is as follows: 

<script type="text/javascript">

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

Here is when the button is clicked to delete, but I want to pop up a confirmation deletion dialog box. If the confirmation is selected after the pop-up, the specific deletion method will be called. There is also a modal box (bootstrap) referenced here. Frame), mainly used to display pop-up box information, the code is as follows: 

<%@ 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">
          &times;
        </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>

The following is today’s protagonist: 

/**
 * 删除请求的操作
 * @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">&times;</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));
  });
}

Write picture description here
Write picture description here

Since there is a lot of code above, let’s look at a simple framework below: 

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

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

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

This is the end of the callback. I hope it will be helpful for everyone to learn. The editor also has a deeper understanding of js custom callback functions.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Explore the fun of JavaScript functional programming_javascript skillsNext article：Explore the fun of JavaScript functional programming_javascript skills

Related articles

See more