Javascript 在ajax进程运行时在引导框中显示加载消息？

我的应用程序中有一个显示状态的页面。状态显示在下拉菜单中，有两个选项

Active/Inactive

。用户只需单击菜单并选择选项即可更改状态。对于这个过程，我使用JQuery/Ajax

onchange

trigger来跟踪状态变化。代码工作正常，并将值保存在datatbase中。我遇到的问题与

bootbox

和显示加载消息有关。当用户单击菜单并更改状态时，ajax将发送请求。此时，对话框窗口将与加载消息一起显示在用户屏幕上。ajax请求完成后，加载对话框应隐藏并向用户显示状态已成功保存的消息。下面是代码示例：

功能警报框（标题、消息、大小）{
标题=标题| |“警报”；
消息=消息| |“警报框”；
尺寸=尺寸| |“lg”；
bootbox.alert({
尺寸：尺寸，
标题:标题,，
信息：信息
});
};
$（'.status'）。在（'change'，function（）上{
设$curr_fld=$（此），
状态标识=$curr\u fld.attr（'data-id'），
dialog=bootbox.dialog({
消息：“
正在加载…
”，
关闭按钮：false
});
$curr_fld.prop（“禁用”，真实）；
/***开始：这是一个测试代码***/
/*
setTimeout（函数（）{
dialog.modal（'hide'）；
$curr_fld.prop（“禁用”，错误）；
alertBox（“警报消息”，状态\u id）；
}, 3000);
*/
/***结束：这是一个测试代码***/
$.ajax({
键入：“POST”，
url:'test.php？id=1'，
数据：{
“状态id”：状态id
},
数据类型：“json”
}).完成（功能（obj）{
dialog.modal（'hide'）；
$curr_fld.prop（“禁用”，错误）；
如果（对象状态===200）{
警报框（“警报消息”，obj）；
}否则{
警报框（“警报消息”，obj）；
}
}).fail（函数（jqXHR、textStatus、errorshown）{
$curr_fld.prop（“禁用”，错误）；
alertBox（“错误”，文本状态）；
});
});

部分
地位
南方
活跃的
不活跃的
北
活跃的
不活跃的
东边
活跃的
不活跃的
西部
活跃的
不活跃的
部分
地位
我注意到了几个问题：

您需要从ajax调用的
always
函数关闭对话框。测试时会出现失败，但您没有关闭对话框的代码。然而，这仍然没有解决问题
这似乎是boostrap模式的一个问题。发生的情况是，在动画完成之前调用
hide
函数太快。有两种解决方案可以解决此问题：

使用
animate:false
禁用动画
添加检测动画是否完成的代码，如果动画未完成，请在
始终
功能中进行适当操作

$（'.status'）。在（'change'，function（）上{
设$curr_fld=$（此），
所示加载=错误，
状态标识=$curr\u fld.attr（'data-id'），
dialog=bootbox.dialog({
//设置动画：false，//加载所示内容=true）；
$curr_fld.prop（“禁用”，真实）；
$.ajax({
键入：“POST”，
url:'test.php？id=1'，
数据：{
“状态id”：状态id
},
数据类型：“json”
}).完成（功能（obj）{
$curr_fld.prop（“禁用”，错误）；
如果（对象状态===200）{
警报框（“警报消息”，obj）；
}否则{
警报框（“警报消息”，obj）；
}
}).fail（函数（jqXHR、textStatus、errorshown）{
$curr_fld.prop（“禁用”，错误）；
alertBox（“错误”，文本状态）；
}).总是（（）=>{
//立即隐藏，或通过侦听等待动画完成
//以显示模式。
如图所示，正在加载
？dialog.modal（'隐藏'）
：dialog.on（'show.bs.modal'，（）=>dialog.modal（'hide'）；
}); 
});

可能有更简洁的方法来处理动画问题而不禁用动画本身。这只是一种方法。
我注意到了几个问题：

您需要从ajax调用的
始终
函数关闭对话框。测试时会出现失败，但您没有关闭对话框的代码。但是，这仍然无法解决问题
这似乎是boostrap模式的一个问题。发生的情况是在动画完成之前过早调用了
隐藏
函数。有两种解决方案可以解决此问题：

使用
animate:false
禁用动画
添加检测动画是否完成的代码，如果动画未完成，请在
始终
功能中进行适当操作

$（'.status'）。在（'change'，function（）上{
设$curr_fld=$（此），
所示加载=错误，
状态标识=$curr\u fld.attr（'data-id'），
dialog=bootbox.dialog({
//设置动画：false，//加载所示内容=true）；
$curr_fld.prop（“禁用”，真实）；
$.ajax({
键入：“POST”，
url:'test.php？id=1'，
数据：{
“状态id”：状态id
},
数据类型：“json”
}).完成（功能（obj）{
$curr_fld.prop（“禁用”，错误）；
如果（对象状态===200）{
警报框（“警报消息”，obj）；
}否则{
警报框（“警报消息”，obj）；
}
}).fail（函数（jqXHR、textStatus、errorshown）{
$curr_fld.prop（“禁用”，错误）；
alertBox（“错误”，文本状态）；
}).总是（（）=>{
//立即隐藏，或通过侦听等待动画完成
//以显示模式。
如图所示，正在加载
？dialog.modal（'隐藏'）
：dialog.on（'show.bs.modal'，（）=>dialog.modal（'hide'）；
}); 
});

可能有莫言
$('.status').on('change', function() {
  let $curr_fld = $(this),
    loading_shown = false,
    status_id = $curr_fld.attr('data-id'),
    dialog = bootbox.dialog({
      // animate: false, // <-- simple way that makes the issue go away.
      message: '<p class="text-center mb-0"><i class="fa fa-spin fa-cog"></i> Loading...</p>',
      closeButton: false,
    }).on('shown.bs.modal', () => loading_shown = true);

  $curr_fld.prop("disabled", true);

  $.ajax({
    type: 'POST',
    url: 'test.php?id=1',
    data: {
      'status_id': status_id
    },
    dataType: 'json'
  }).done(function(obj) {
    $curr_fld.prop("disabled", false);
    if (obj.status === 200) {
      alertBox('Alert Message', obj);
    } else {
      alertBox('Alert Message', obj);
    }
  }).fail(function(jqXHR, textStatus, errorThrown) {
    $curr_fld.prop("disabled", false);
    alertBox('Error', textStatus);
  }).always(() => {
    // hide immediately, or wait until the animation is complete by listening
    // to shown.bs.modal.
    loading_shown 
      ? dialog.modal('hide')
      : dialog.on('shown.bs.modal', () => dialog.modal('hide'));
  }); 
});


setTimeout(function(){ 
   dialog.modal('hide')
},200);