About JavaScript custom callback functions and javascript callback Functions

About JavaScript custom callback functions and javascript callback Functions

If you don't talk much about it, You can directly post code to everyone.

Background Analysis

First, let's take a look at a piece of js Code. When adding a javascript code, we first use an asynchronous request to determine whether it exists. If it does not exist, we will perform the add operation:

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

When I add a piece of data, I first determine whether the data exists in the Database (of course, if the front and back ends are completely separated, the front end should not judge the business logic. The front end should only, first, isExited () requests are implemented by ajax requests. This is asynchronous. Obviously, when the interface does not return results, execute the following function (usually Yes) so that the isExited value is undefined. This is obviously not what you want. To implement similar functions, you can use the callback function, the following is a case study.

The procedure 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 "%> 
The main js Code is as follows:
<Script type = "text/javascript">/*** Delete request */function supplierDelete (element) {var id = element. parentNode. parentNode. cells [0]. innerHTML; modalDeleteRequest ('$ {pageContext. request. contextPath}/oms/supplier/remove/', id) ;}</script>
Here is the deletion when you click the button, but I want to bring up a confirmation deletion dialog box. If you select confirmation after the pop-up, you can call the specific deletion method, A modal box (bootstrap framework) is referenced here, which is mainly used to display the information in the pop-up box. 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"> × </button> 

Below is the main character of today:
/*** Delete request operation * @ param url Delete request url * @ param id Delete id */function modalDeleteRequest (url, id) {confirmIsDelete (url, id, deleteRequest);}/*** call the callback function * @ 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") ;}/ *** dialog box to confirm whether to delete the * @ param url Delete request url * @ param id Delete the Request id * @ param callback function. The callback function */function confirmIsDelete (url, id, callback) is required at the end) {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> '+' 


As there are many codes above, let's look at a simple framework:
/*** Callback function test method ** @ param callback * callback Method */function testCallback (callback) {alert ('Come in! '); Callback () ;}/ *** callback function */function a () {alert ('A ');} /*** start test method */function start () {testCallback ();}
The above content is the js callback function introduced to you through code analysis. I hope you will like it.