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

问题

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(....)
    ....
}

回答1:

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.

回答2:

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.

来源：https://stackoverflow.com/questions/6880392/are-jquery-fadein-animation-functions-non-blocking

标签

javascript

ajax

jquery

nonblocking