CODEWITHSUNDEEP
javascriptcss-transitionsrace-conditiontransitionend
nonopolarity
nonopolarity

Reputation: 151196

How to solve JavaScript race condition - transitionend not fired

I have the following race condition in JavaScript:

(it is to fade out and fade in a <h1>some title</h1> after the AJAX succeeded, using CSS3 transition):

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)

The situation is that if I clicking on the UI slowly, then everything works, but if I keep on clicking the UI and let new AJAX be fired, then the "transitionend" is never fired after about 20 clicks, and sometimes it happens, sometimes not.

The 20ms is due to Firefox and IE not know how to animate it if "not-display" and "fading-out" are removed at the same time. Chrome is said to be able to handle it.

Any new user click on the UI will cancel out the original AJAX and fire a new AJAX.

the .fading-out is an opacity: 0 and the not-display is a display: none.

What I suspect is the display: none somehow kicked in during the "fading out" phase, and cancel out the animation, and therefore, aborted the transition, and therefore, the transitionend event was never fired, and therefore the item was never re-displayed, as described in For JavaScript or jQuery, how to make transitionend event not fire?

But I would like to find out if this or any other situations might be a possible cause and what can be a fix. Any insight is welcome.

(I was also thinking that if this logic can have a flag, that says if it is used to both fade out and fade in, then don't set any display: none along the way, and then there also won't be a 20ms delay involved).

Update: come to think about it, what if within that 20ms window, the AJAX success handler adds the fading-out class and then the 20ms delay ended and removes the fading-out class, is it enough fade out and fade in to trigger a transitionend? Or, what if the add and remove happen in the same event cycle? It looks like in Chrome, even if it is the next cycle, then transitionend will happen: http://jsfiddle.net/HA8s2/36/ but if in same cycle, then transitionend won't happen: http://jsfiddle.net/HA8s2/37/

Upvotes: 2

Views: 768

Answers (0)

Related Questions