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-30 09:49:45Z

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, 2011 at 9:49

answered Jul 30, 2011 at 1:17

Guffa

703k111 gold badges760 silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ca9163d9 Over a year ago

but does javascript has only one thread? how can javascript run other scripts when it's busy rendering the animation?

Guffa Over a year ago

@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.

Cameron Skinner · Accepted Answer · 2011-07-30 01:29:10Z

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, 2011 at 1:29

answered Jul 30, 2011 at 1:13

Cameron Skinner

55.2k3 gold badges70 silver badges86 bronze badges

5 Comments

James Gaunt Over a year ago

Not entirely all, there are some built in methods that will block. But certainly all jquery / js library methods.

Guffa Over a year ago

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.

Cameron Skinner Over a year ago

@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.

Guffa Over a year ago

@Cameron Skinner: Well, the sleep wouldn't actually happen between the fade in and fade out, it would happen first.

Cameron Skinner Over a year ago

@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.

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related