js自定义回调函数
背景分析
首先看一段js的代码，主要实现添加的时候首先通过异步请求判断是否存在，如果不存在的话，在进行添加操作：
functionadd(url,data){
varisExited=isExited(data);
if(!isExited){
addRequest(url,data);
}
}
当我添加一个数据的时候，我首先通过判断是否在数据库中存在（当然，如果前后台彻底分离的话，不应该前端进行业务逻辑的判断，前端只应该，用来展示数据），首先，isExited（）的请求是ajax请求实现，这个是异步的，很显然，界面很有可能在没有返回结果的时候，就执行下边的函数（通常情况下是的），就使得isExited的值是undefined，这显然不是想要的，如果要实现类似的功能可以使用用回调函数实现，下边介绍一个案例。
过程如下
前台jsp界面如下：
<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%>
<%@taglibprefix="c"uri="http://java.sun.com/jsp/jstl/core"%>
<head>
<metacharset="utf-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1">
<title>JS回调函数案例</title>
<!--Bootstrap-->
<linkhref="<c:urlvalue='/lib/bootstrap/css/bootstrap.min.css'/>"rel="stylesheet">
<scripttype="text/javascript">
/**
*删除的请求
*/
functionsupplierDelete(element){
varid=element.parentNode.parentNode.cells[0].innerHTML;
modalDeleteRequest('${pageContext.request.contextPath}/oms/supplier/remove/',id);
}
</script>
</head>
<body>
<!--顶部导航-->
<divclass="navbarnavbar-inversenavbar-fixed-top"role="navigation"id="menu-nav">
</div>
<divclass="containerpartner-table-containertextFont">
<tableclass="tabletable-stripeddetailTableSet">
<caption><h2>JS回调函数案例</h2></caption>
<br>
<trclass="table-hoverform-horizontal">
<tdclass="info">123</td>
<tdclass="info">123</td>
<tdclass="info">123</td>
<tdclass="info">123</td>
<tdclass="info">123</td>
</tr>
<tr>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>
<aonclick="supplierUpdate(this)">修改</a>
<aonclick="supplierDelete(this)">删除</a>
</td>
</tr>
</table>
</div>
<!--显示成功失败的modal-->
<%@includefile="/modal-custom.jsp"%>
<scriptsrc="<c:urlvalue='/lib/jquery-1.8.3.min.js'/>"></script>
<scriptsrc="<c:urlvalue='/lib/bootstrap/js/bootstrap.min.js'/>"></script>
<scripttype="text/javascript"src="<c:urlvalue='/js/modal-operate.js'/>"></script>
</body>
</html>
主要的js代码如下：
<scripttype="text/javascript">
/**
*删除的请求
*/
functionsupplierDelete(element){
varid=element.parentNode.parentNode.cells[0].innerHTML;
modalDeleteRequest('${pageContext.request.contextPath}/oms/supplier/remove/',id);
}
</script>
这里就是当点击按钮的时候进行删除，但是我想弹出一个确认删除对话框，如果弹出之后选择的是确认之后，才调用具体的删除方法，还有这里边引用了一个modal框（bootstrap框架），主要是用于展示弹出框信息，代码如下：
<%@pagelanguage="java"pageEncoding="UTF-8"%> <%@taglibprefix="c"uri="http://java.sun.com/jsp/jstl/core"%> <!--模态框（Modal）--> <divclass="modalfade"id="modal-result"tabindex="-1"role="dialog" aria-labelledby="myModalLabel"aria-hidden="true"> <divclass="modal-dialog"> <divclass="modal-content"> <divclass="modal-header"> <buttontype="button"class="close" data-dismiss="modal"aria-hidden="true"> × </button> <h4class="modal-title"id="myModalLabel"> 信息 </h4> </div> <divclass="modal-body"id="modal-add-result-text"> </div> <divclass="modal-footer"> <buttontype="button"class="btnbtn-default" data-dismiss="modal">关闭 </button> </div> </div> <!--/.modal-content--> </div> <!--/.modal--> </div>
下边是今天的主角：
/**
*删除请求的操作
*@paramurl删除请求的url
*@paramid删除的id
*/
functionmodalDeleteRequest(url,id){
confirmIsDelete(url,id,deleteRequest);
}
/**
*在删除警告框确认之后调用的回调函数
*@paramurl
*@paramid
*/
functiondeleteRequest(url,id){
$.get(url+id,function(result){
$("#modal-add-result-text").text(result.msg);
$("#modal-result").modal('show');
},"json");
}
/**
*弹出对话框确认是否删除
*@paramurl删除请求的url
*@paramid删除请求的id
*@paramcallback回调函数，在最后的时候需要进行回调的函数
*/
functionconfirmIsDelete(url,id,callback){
varconfirmDeleteDialog=$('<divclass="modalfade"><divclass="modal-dialog">'
+'<divclass="modal-content"><divclass="modal-header"><buttontype="button"class="close"'
+'data-dismiss="modal"aria-hidden="true">×</button>'
+'<h4class="modal-title">确认删除</h4></div><divclass="modal-body">'
+'<divclass="alertalert-warning">确认要删除吗？删除之后无法恢复哦！</div></div><divclass="modal-footer">'
+'<buttontype="button"class="btnbtn-default"data-dismiss="modal">取消</button>'
+'<buttontype="button"class="btnbtn-success"id="deleteOK">删除</button></div></div>'
+'</div></div>');
confirmDeleteDialog.modal({
keyboard:false
}).on({
'hidden.bs.modal':function(){
$(this).remove();
}
});
vardeleteConfirm=confirmDeleteDialog.find('#deleteOK');
deleteConfirm.on('click',function(){
confirmDeleteDialog.modal('hide');//隐藏dialog
//需要回调的函数
callback(deleteRequest(url,id));
});
}
这里写图片描述
这里写图片描述
上边由于代码比较多，下边看一个简单的框架：
/**
*回调函数测试方法
*
*@paramcallback
*回调的方法
*/
functiontestCallback(callback){
alert('comein!');
callback();
}
/**
*被回调的函数
*/
functiona(){
alert('a');
}
/**
*开始测试方法
*/
functionstart(){
testCallback(a);
}
到此回调结束，希望对大家学习有帮助，小编也对js自定义回调函数有了更深入的了解。