Question

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 computer 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?*/

Answer 1

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