26

I've been doing a lot of reading online trying to figure out how to write asynchronous JavaScript code. One of the techniques that has come up a lot in my research is to use callbacks. While I understand the process of how to write and execute a callback function, I'm confused why callbacks seem to automagically make the JavaScript execution asynchronous. So, my question is: how does adding in callback functions to my JavaScript code make said code automagically async?

  • 2
    You might be interested in reading how the browser achieves this within a single thread, written by John Resig: ejohn.org/blog/how-javascript-timers-work – Jalayn Apr 10 '13 at 17:05
  • @Jalayn. Thanks. Your comment made all the difference after reading the several answers. – kushalvm Dec 15 '15 at 3:13
26

It doesn't. Just taking a callback or passing a callback doesn't mean it's asynchronous.

For example, the .forEach function takes a callback but is synchronous.

var available = false;
[1,2,3].forEach( function(){
    available = true;
});
//code here runs after the whole .forEach has run,
//so available === true here

The setTimeout takes a callback too and is asynchronous.

function myFunction( fn ) {
    setTimeout( function() {
        fn(1,2,3);
    }, 0 );
}

var available = false;
myFunction( function() {
    available = true;
});
//available is never true here

Hooking to any asynchronous event in Javascript always requires a callback but that doesn't mean calling functions or passing them around is always asynchronous.

  • 2
    @SteveEvers I guess you could edit the MDN article then. Callback is a very common term in javascript for any function passed to another that calls you back using the function you gave... why complicate it? Edit: Callback is also used in specs – Esailija Apr 10 '13 at 18:52
  • 3
    @SteveEvers "callback implies asyncrony" is a C#/Microsoft idiosyncrasy. en.wikipedia.org/wiki/Callback_(computer_programming) – Esailija Apr 10 '13 at 18:58
  • 1
    @MikeBrown I guess I read too much into his profile and this - the most upvoted answer certainly gives an idea that "callbacks imply asynchrony". – Esailija Apr 10 '13 at 19:29
  • 1
    But that being said @SteveEvers is also wrong. Callbacks don't imply asynchrony, just that someone else will be responsible for "calling back". – Michael Brown Apr 10 '13 at 19:34
  • 1
    +1 because Steve Evers is wrong – slebetman Apr 11 '13 at 1:45
24

The secret of the "magic" is that the events that you are assigning the callbacks to are asynchronous. They're implemented "under the hood" to take care of whatever they're doing (such as retrieving something from a remote server) in the background, outside of the JS sandbox. And then once they're done with their work, they give the JS engine a message to call an event. When the JS engine is finished with whatever it's currently doing, it will call any events that are queued up (or wait for a new message) and then your callback is "magically" invoked asynchronously!

(NOTE: This is a very high-level, conceptual overview of the topic that doesn't go into details, because different JS engines are going to implement things in different ways. But this is the general idea of how it works.)

  • Which events are these? An example of one or two such events would make your answer even better. – Jo Smo Nov 22 '16 at 7:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.