Question

我在JavaScript中遇到以下竞争条件：

（在AJAX成功后，使用CSS3过渡，淡出并淡入<h1>some title</h1>）：

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)

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

20毫秒是由于Firefox和IE不知道如果同时删除“不显示”和“淡出”的动画。据说Chrome可以处理它。

任何新用户点击UI都会取消原始的AJAX并启动新的AJAX。

.fading-out是opacity: 0而not-display是display: none。

我怀疑display: none在“淡出”阶段以某种方式被踢了，并取消了动画，因此中止了转换，因此，transitionend事件从未被解雇，因此该项目从未重新显示，如For JavaScript or jQuery, how to make transitionend event not fire?

中所述

但我想知道这种情况或任何其他情况是否可能是可能的原因以及可以解决的问题。欢迎任何见解。

（我也在想，如果这个逻辑可以有一个标志，表示它是否用于淡出和淡入，那么在此过程中不要设置任何display: none，然后还有不会涉及20ms的延迟。）

更新：来考虑一下，如果在20ms窗口内，AJAX成功处理程序添加fading-out类，然后20ms延迟结束并删除{{1} }类，是否足够淡出并淡入以触发fading-out？或者，如果添加和删除发生在同一个事件周期中会怎样？它看起来像在Chrome中，即使它是下一个周期，也会transitionend发生transitionend，但如果在同一周期内，transitionend将不会发生：http://jsfiddle.net/HA8s2/36/

如何解决JavaScript竞争条件 - transitionend没有被解雇

0 个答案: