javascript - 避免代码因 jQuery blockUI 中的 javascript 错误而暂停/卡住

Question

让我试着理解一下......

我们正在使用 jQuery block UI plugin 阻止 UI

$(document).ajaxStart(function() {
  $.blockUI({
    message: '<h4><i class="fa fa-circle-o-notch fa-spin fa-fw"></i> loading...</h4>'
  })
}).ajaxStop($.unblockUI);

有时，当代码抛出一些错误时:

卡住屏幕上的加载消息不会消失:

原因是:

1. 当ajaxStart()启动时，$.blockUI()被调用。

2. 在 ajaxStart() 成功完成执行之前，它遇到了错误。

3. ajaxStop() 永远不会到达，并且 UI 永远不会解锁 ($.unblockUI)

因此，我正在寻找一种在 ajaxStart() 和 ajaxStop() 之间出现错误时显示一些自定义消息的方法。而不是代码因 JavaScript 错误而暂停/卡住。

另外，当我尝试@Raghav's suggestion时，它不会取消卡住屏幕。

$(document).ajaxStart(function() {
  $.blockUI({
    message: '<h4><i class="fa fa-circle-o-notch fa-spin fa-fw"></i> loading...</h4>'
  })
  throw Error;
  debugger;
}).ajaxStop($.unblockUI).ajaxError($.unblockUI);

这不是很有意义吗？

Answer 1

您是否尝试过使用 ajaxError() 处理错误

参见:https://api.jquery.com/ajaxError/

$(document).ajaxError(function() {
   $.unblockUI();
   // Display error message here
   alert('Some error message');
}); 
$(document).ajaxStop(function() {$.unblockUI();});
$(document).ajaxStart(function() {
  $.blockUI({
    message: '<h4><i class="fa fa-circle-o-notch fa-spin fa-fw"></i>loading...</h4>'
  })
});

您还可以获取错误消息。有关详细信息，请参阅文档。

$(document).ajaxError(function( event, jqxhr, settings, thrownError ) {

   $.unblockUI();
   console.log(event, jqxhr, settings, thrownError);
});