Javascript 在队列中执行分组动画

我有一个旋转器和一张桌子

加载表格时，我想隐藏表格并显示微调器。 加载完成后，我想隐藏微调器，并再次显示表

我可以这样做，但是当ajax调用在动画完成之前完成时，我会同时显示微调器和表格

$(document).ajaxStart(function() {
  $( ".spinner" ).hide();
});

$(document).ajaxStop(function() {
  $( ".spinner" ).show();
});

这是我当前的代码

setLoading(true);// below is executed
$('#table').fadeOut(200, function(){$('#spinner').fadeIn()}
setLoading(false);/ below is executed
$('#spinner').fadeOut(200, function(){$('#table').fadeIn()}

但当ajax调用结束时，当微调器仍在淡入时，我最终看到了表和微调器

有没有办法将分组动画排队

我希望它是怎样的：

Start Table fadeout
End Table fadeout
Start spinner fadein
End spinner fadein
Ajax call Finished
Start spinner fadeout
End spinner fadeout
Start Table fadein
end Table fadein

发生了什么：

Start Table fadeout
Ajax call finishes
Start spinner fadeout
End spinner fadeout
Start Table fadein
End Table fadeout
Start spinner fadein

---

感谢利用

ajaxStart

和

ajaxStop

事件

在ajaxStart事件中，可以显示微调器并隐藏表格；在ajaxStop中，可以隐藏微调器并显示表格

$(document).ajaxStart(function() {
  $( ".spinner" ).hide();
});

$(document).ajaxStop(function() {
  $( ".spinner" ).show();
});

---

我已经在这样做了，但是对于fadein和fadeout，由于动画的原因，我有执行顺序问题ajax调用需要多少时间才能完成？可能是你的淡入淡出过渡时间太长了。它不到100毫秒。这就是为什么我想要一个固体解决方案，从用户体验的角度来看，这可能不是最好的方法，让用户在工作完成后等待过渡。您需要了解

事件循环

以及循环中事件的排队方式。我明白您的意思，当所有数据都已准备好时，用户不应该等待以前的事件完成。我将研究事件循环