如何重构代码以使Bootstrap的模态方法使用回调异步？

我在我的网站上使用Bootstrap v3.3.0 。 我正在使用Bootstrap框架的模态对话框function。

我已经为表单提交编写了一个jQuery-AJAX函数，如下所示：

$('#rebate_request_form').submit(function(e) { $('#rebateModal').modal('hide'); $('#progressModal').modal('show'); var fileInput = $("#receipt_image")[0]; var input = $("#receipt_image").val(); var form = $(this); var formdata = false; if(window.FormData) { formdata = new FormData(form[0]); } if(input != '') { var ImgSizeInBytes = fileInput.files[0].size; var filename = $('input[type=file]').val().split('\\').pop(); var customer_id = $('#customer_id').val(); } if(input!='' && ImgSizeInBytes > 10485760) { var trans_id = $('#trans_id').val(); var trans_date_dateLists_year_list = $("#trans_date_dateLists_year_list").val(); var trans_date_dateLists_month_list = $("#trans_date_dateLists_month_list").val(); var trans_date_dateLists_day_list = $("#trans_date_dateLists_day_list").val(); var params = "trans_id="+trans_id+"&trans_date_dateLists_day_list="+trans_date_dateLists_day_list+"&trans_date_dateLists_month_list="+trans_date_dateLists_month_list+"&trans_date_dateLists_year_list="+trans_date_dateLists_year_list+"&file_size="+ImgSizeInBytes+"&file_name="+filename+"&customer_id="+customer_id; var method = 'GET'; } else { var params = formdata ? formdata : form.serialize(); var method = 'POST'; } var formAction = form.attr('action'); $.ajax({ url : 'rebate_request.php', type : method, cache : false, data : params, contentType : false, processData : false, success: function(response) { $('#progressModal').modal('hide'); var responseObject = $.parseJSON(response); if(responseObject.error_message) { $('#rebateModal').modal('show'); if ($(".alert-dismissible")[0]) { $('.alert-dismissible').remove(); } var htmlString = "
×"+responseObject.error_message+"
"; $(htmlString).insertBefore('div.modal-body #rebate_request_form'); } else { $('#successModal').modal('show'); } } }); e.preventDefault(); }); 

上面的函数工作正常但有时在响应中收到error_message时，没有显示id为“rebateModal”的模态 。 虽然有时在某​​些浏览器中我没有遇到这个问题，但一切都运行顺畅。

所以我想重构一下我使用Bootstrap的函数回调调用模态方法的代码，如下所示：

 $('#rebateModal').one('hidden.bs.modal', function () { $('#progressModal').one('shown.bs.modal', function () { //...more code... }).modal('show'); }).modal('hide'); 

但是由于我是Bootstrap框架和JS的新手，我无法以上述方式编写代码。

那么有人可以帮我重构我使用Bootstrap函数回调编写的代码吗？

如果您需要有关Bootstrap中函数回调的其他信息，请参阅以下链接： Bootstrap Modalfunction的链接

提前致谢。

Answer 1

我认为既然您想要使用回调函数，那么您的怀疑是在提交函数中的调用之间可能存在竞争条件（可能是由于在动画中花费的时间）：

 $('#rebateModal').modal('hide'); 

并且在AJAX成功函数中调用（当响应包含error_message时）：

 $('#rebateModal').modal('show'); 

在这种情况下，一种可能的实现方式是：

 $( '#rebate_request_form' ).submit( function(e) { $( '#rebateModal' ).one( 'hidden.bs.modal', function () { $('#progressModal').one( 'shown.bs.modal', function () { var fileInput = $("#receipt_image")[0]; var input = $("#receipt_image").val(); var form = $( '#rebate_request_form' ); var formdata = false; if( window.FormData ) { formdata = new FormData( form[0] ); } if(input != '') { var ImgSizeInBytes = fileInput.files[0].size; var filename = $('input[type=file]').val().split('\\').pop(); var customer_id = $('#customer_id').val(); } if(input!='' && ImgSizeInBytes > 10485760) { var trans_id = $('#trans_id').val(); var trans_date_dateLists_year_list = $("#trans_date_dateLists_year_list").val(); var trans_date_dateLists_month_list = $("#trans_date_dateLists_month_list").val(); var trans_date_dateLists_day_list = $("#trans_date_dateLists_day_list").val(); var params = "trans_id="+trans_id+"&trans_date_dateLists_day_list="+trans_date_dateLists_day_list+"&trans_date_dateLists_month_list="+trans_date_dateLists_month_list+"&trans_date_dateLists_year_list="+trans_date_dateLists_year_list+"&file_size="+ImgSizeInBytes+"&file_name="+filename+"&customer_id="+customer_id; var method = 'GET'; } else { var params = formdata ? formdata : form.serialize(); var method = 'POST'; } var formAction = form.attr('action'); $.ajax( { url : 'rebate_request.php', type : method, cache : false, data : params, contentType : false, processData : false, success: function(response) { $('#progressModal').one( 'hidden.bs.modal', function () { var responseObject = $.parseJSON(response); if(responseObject.error_message) { $('#rebateModal').modal('show'); if ($(".alert-dismissible")[0]) { $('.alert-dismissible').remove(); } var htmlString = "
×"+responseObject.error_message+"
"; $(htmlString).insertBefore('div.modal-body #rebate_request_form'); } else { $('#successModal').modal('show'); } } ).modal('hide'); } }); } ).modal( 'show' ); } ).modal( 'hide' ); e.preventDefault(); } ); 

只有在隐藏回调完成后才进行AJAX调用（一旦隐藏动画完成就应该进行），你可以消除AJAX调用返回的可能竞争条件，其错误比模态隐藏动画更快。

这只是一个粗略的实现。 您可能还想将内部代码拉出到可以按名称调用的单独函数中。 这将允许您包装一些初始逻辑来处理各种场景（例如，如果在调用表单提交函数时#rebateModal不可见）