2

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/

Community
  • 1
  • 1
nonopolarity
  • 146,324
  • 131
  • 460
  • 740
  • We really need a jsFiddle for this. – Brad M Jul 30 '13 at 16:09
  • A quick thought is to use flag, like you mentioned, but then again it really depends on what you're trying to achieve, do you want it to be able to send 20 requests for 20 clicks or do you want to disable it after each click until the request is over? – Jonast92 Jul 30 '13 at 16:14

0 Answers0