JavaScript自訂回呼函數

JavaScript自訂回呼函數
背景分析

首先看一段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 %>

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>  
JS回呼函數案例

123	123	123	123	123
123	123	123	123	123	修改  刪除

<%@include file=/modal-custom.jsp %> <script src=</script><script src=</script><script type=text/javascript src=</script>

主要的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 %>

× 資訊   關閉

下邊是今天的主角：

/** * 刪除請求的操作 * @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 = $('

' + ' ×' + ' 確認刪除 ' + ' 確認要刪除嗎？刪除之後無法恢複哦！ ' + '取消' + '刪除 ' + ' '); 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);}

到此回調結束，希望對大家有協助！