如何解决JavaScript竞争条件-transitionend not fired

我在JavaScript中有以下竞争条件：

（使用CSS3转换，在AJAX成功后淡出并淡入

某个标题中）：

情况是，如果我缓慢地点击UI，那么一切都正常，但是如果我继续点击UI并让新的AJAX启动，那么在大约20次点击之后，“transitionend”就永远不会启动，有时会发生，有时不会

20毫秒是由于Firefox和IE不知道如何设置动画，如果“不显示”和“淡出”被同时删除。据说铬合金可以处理它

任何新用户点击UI都会取消原来的AJAX并触发新的AJAX

淡出
为
不透明度：0
，
不显示
为
显示：无

我怀疑的是
display:none
在“淡出”阶段以某种方式启动，取消了动画，因此中止了转换，因此，
transitionend
事件从未触发，因此项目从未重新显示，如中所述

但我想知道这或任何其他情况是否可能是原因，以及如何解决。欢迎有任何见解

（我也在想，如果这个逻辑可以有一个标志，即如果它同时用于淡出和淡入，那么不要设置任何
显示：一路上没有
，那么也不会有20毫秒的延迟）

更新：仔细想想，如果在20毫秒的窗口内，AJAX成功处理程序添加了
淡出
类，然后20毫秒延迟结束并删除了
淡出
类，那么淡出和淡入是否足以触发
转换呢？或者，如果添加和删除发生在同一事件周期中，该怎么办？在Chrome中看起来，即使是下一个周期，也会发生
transitionend
：但如果在同一个周期中，则不会发生
transitionend
：
我们确实需要一个JSFIDLE来实现这一点。一个快速的想法是使用标志，就像你提到的，但这又取决于你想要实现什么，您希望它能够为20次单击发送20个请求，还是希望在每次单击后禁用它，直到请求结束？
AJAX success handler
    add the "fading-out" CSS class
wait for "transitionend" event -- 
    add the "not-display" CSS class
    call a callback function, which does the following:
        change the title by $("#some-id").html("another title");
        remove "not-display"
        after 20ms, remove "fading-out" (by using a setTimeout)