Are jQuery fadeIn(), animation() functions non-blocking?

Question

I have a page which issues several ajax queries in $('document').ready(). I want to use fadeIn() or animation() to display some information for a few seconds after received the first ajax call.

Will the following js/ajax calls be blocked during the animation playing? Or should I use setTimeout to delay the animation a second so the ajax calls can be started asynchronously?

Edit:

My code will look like this. Will the others ajax calls be blocked for 5 seconds?

$.ajax({..., success: function(result) {
    $('#msg').html(result.xxx);
    $('#msg').fadeIn(5000);

    // Other ajax calls
    $.ajax(....)
    ....
}

Guffa · Accepted Answer · 2011-07-30T09:49:45.087

4

Yes, they are non-blocking. The animation methods just initiate the animation and returns immediately.

Any code that updates the user interface has to be non-blocking, as the user interface isn't updated while any function is running.

edited Jul 30 '11 at 09:49

answered Jul 30 '11 at 01:17

Guffa

687,336
108
737
1,005

but does javascript has only one thread? how can javascript run other scripts when it's busy rendering the animation? – ca9163d9 Jul 30 '11 at 03:31
@NickW: The animation uses timers, so the animation code only runs in short bursts when it needs to change something. The timers causes events at set intervals, and the event handlers run when nothing else is running. If you start a long running function while an animation is active you will see that the animation pauses, as the event handler can't run at the same time as your function. – Guffa Jul 30 '11 at 09:47

Cameron Skinner · Answer 2 · 2011-07-30T01:29:10.270

1

All javascript can be considered blocking because it is entirely single threaded.

You can't do something like:

fadeIn
sleep(5 seconds)
fadeOut

without causing incoming ajax responses to be queued until the fadeOut has returned. Using setTimeout is probably the best thing to do.

EDIT: As @Guffa pointed out, the actual calls to fadeIn and fadeOut are not, themselves, blocking calls. What you probably want is something like:

fadeIn(time, function() {
    setTimeout("fadeOut()", 5000);
});

or words to that effect.

edited Jul 30 '11 at 01:29

answered Jul 30 '11 at 01:13

Cameron Skinner

51,692
2
65
86

Not entirely all, there are some built in methods that will block. But certainly all jquery / js library methods. – James Gaunt Jul 30 '11 at 01:16
No, the animation methods are *not* blocking. You can't use them as in your example, as the `fadeIn` and `fadeOut` would start at the same time and not wait for the previous to finish. – Guffa Jul 30 '11 at 01:19
1

@Guffa: Yes, you're right. Not sure why I was so confused. Probably just been a long week. In any case, in the example there is a sleep between the `fadeIn` and `fadeOut` which certainly *is* blocking. – Cameron Skinner Jul 30 '11 at 01:26
@Cameron Skinner: Well, the sleep wouldn't actually happen between the fade in and fade out, it would happen first. – Guffa Jul 30 '11 at 01:29
@Guffa: Oh, I see what you mean. The call to `fadeIn` would **return** before the sleep begins, but the effect of the sleep would start before the effect of the `fadeIn`. Yeah, javascript's a bit tricky like that. – Cameron Skinner Jul 30 '11 at 01:30

Are jQuery fadeIn(), animation() functions non-blocking?

2 Answers2

Linked