javascript - How do you determine if an asynchronous function is completed in before executing another one in jQuery (on really

admin管理员组

文章数量:1289827

For example, let's say I use the .addClass() method. You can't append a callback to it (e.g. you can't do $('...').addClass('...').load('...') ).

In most cases, you can just call your functions back to back before using .load() and you're fine.

But what if I have a super slow puter where using .addClass() takes 5 seconds? How do I execute another asynchronous function only after .addClass() has finished, or for that matter, after any JavaScript asynchronous function is finished?

EDIT: I was wrong, .addClass is not asynchronous.

So, then, just to be sure:

$('foo').addClass('');
/*this code here will not execute UNLESS the previous line is absolutely finished?*/

For example, let's say I use the .addClass() method. You can't append a callback to it (e.g. you can't do $('...').addClass('...').load('...') ).

In most cases, you can just call your functions back to back before using .load() and you're fine.

But what if I have a super slow puter where using .addClass() takes 5 seconds? How do I execute another asynchronous function only after .addClass() has finished, or for that matter, after any JavaScript asynchronous function is finished?

EDIT: I was wrong, .addClass is not asynchronous.

So, then, just to be sure:

$('foo').addClass('');
/*this code here will not execute UNLESS the previous line is absolutely finished?*/

• javascript
• jquery
• asynchronous

Share Improve this question Follow edited May 16, 2011 at 7:17 trusktr asked May 16, 2011 at 6:43 trusktrtrusktr 45.5k5858 gold badges209209 silver badges287287 bronze badges 2

• 2 What makes you think that addClass() is asynchronous? AFAIK none of the DOM manipulation methods are. – deceze ♦ Commented May 16, 2011 at 6:46
• 1 @deceze Nope, you are right. Setting the css or class of a DOM element is not something that happen asynchronously. – rkj Commented May 16, 2011 at 6:48

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

addClass is not asynchronous, and there is no environment in which it will take any significant time to perform its job. jQuery's various operations that are asynchronous (ajax, effects, that kind of thing) accept callbacks as part of their API.

I think (without going back and re-reading the API) that if an API function doesn't have a callback, you can assume the operation is synchronous.

The converse is not true; jQuery has several API functions (each, for instance) that accept callbacks that aren't asynchronous, it's just that the callback is handy for other reasons.

In any case, any asynchronous operation should be clearly identified as such in the documentation.

Update: Addressing your updated question: Correct, the code after addClass will not execute until addClass is plete. Even if it took a second or two (which of course it doesn't, but let's pretend), addClass will plod through doing its thing, and return back to your code. The subsequent code won't run until it does, and no other code can run while that's happening (because JavaScript on web browsers is single-threaded unless you use web workers, and even then coordination between threads is explicit).

There are some operations where you have to give the browser a moment to process what you've told it to do. I'm trying to think of a specific example, something around adding form fields in IE. Definitely not simple things. In those rare situations, you can ensure you've given the browser an opportunity to do its thing by explicitly yielding to the browser with a setTimeout:

doSomethingTheBrowserHasToThinkAbout();
setTimeout(function() {
    // Now you know the browser's had time to think about it
    doSomethingElse();
}, 0); // <== Won't really be 0, most browsers clamp this to 5-10ms minimum

But you don't have to do that (and don't want to do that) except for certain specific operations. I'm sorry I'm not immediately remembering an example, but we're talking edge cases here.

addClass is not pleting for me until i put subsequent ajax/rendering in a setTimeout. It must be asynchronous to some degree. I'm trying to add a class to the body (for loading gif) and it just adds the "class" attribute without a value. When the code after is put into a setTimeout, it pletes. This is in Chrome and almost 4 years later...

addClass is not asynchronous. In jQuery the asynchronous methods allow you to specify a callback function which will be called when the method pletes. If there's no method signature that accepts a callback then chances are that method is synchronous.

本文标签：