Javascript asynchronous callbacks

Question

I have studied and studied, but I don't understand asynchronous situations in javascript. Consider the following blocking behavior:

var data = getData();
alert(data);

function getData(){

    //takes a while to do stuff
    return stuff;
}

Instead it should be:

getData(function(data){
    alert(data);
});

function getData(callback){

    callback();

}

How does this avoid blocking? I just don't seem to grasp how this is any different than just calling one function from within another function. Aren't I just passing a function definition as the callback to getData() for it to use later? It seems like I would still be waiting on the callback function. I can't seem to understand how this allows the functions to run in parallel. Maybe someone could outline the execution step by step for me or something.

Check out this answer: http://stackoverflow.com/questions/9596276/how-to-explain-callbacks-in-plain-english-how-are-they-different-from-calling-o — Blank, Jul 12 '16 at 00:46
I read that answer and it has come to my attention that I understand callbacks in the sense of passing a function as an argument to another function and calling it later. However, what I am searching for is the understanding of asynchronous behavior. I don't understand how the code can be processed in parallel instead of waiting, line by line. — REAL O G, Jul 12 '16 at 00:52
Which portion of `javascript` at Question is being processed "in parallel"? — guest271314, Jul 12 '16 at 00:59
What I am trying to understand is something like an ajax call, or a function that we would end up waiting for, to return some data. From what I gather, using callbacks allows the parent function to continue onward instead of waiting at that line for the child function to return it's data. Then, when the child function that takes time is complete, the parent function is notified or called back and can use that returned data. Yet I don't understand this whatsoever. How can the parent function and the child function operate asynchronously? — REAL O G, Jul 12 '16 at 01:06

Samuel Toh · Answer 1 · 2016-07-12T01:19:46.510

Even thought Javascript is typically seen as a NOT multi-threaded programming language, which is correct since it doesn't have concurrency features like e.g. threads in Java but deep down our Javascript engines like V8... It actually is multi-threaded. Hah.

So what really happens when you invoke an asynchronous method like below?

$.get( "www.helloWorld.com/test.html", function( data ) {
  alert( "Load was performed." );
});
alert("Hey there!");

For what $.get() is, refer to https://api.jquery.com/jquery.get/

When your code gets to the async $.get() method, a thread is actually spawned from the Javascript engine to go away and do stuff seperately from your main thread.

In this case a HTTP GET request is made against the www,helloWorld.com endpoint to fetch data for the test.html page.

While this is all happening, separately from your main thread, your main thread does not wait for its return, instead a callback function is passed to the $.get() API to instruct it to 'call me back'/run the logics within it when it has finished its job. In this example we do a simple alert("Load was performed"), while in real world scenario you typically want to read the response data and popular a variable or paste the text onto a textbox.

Hence, instead of waiting for $.get() to finish, the code actually moves on to the next line to do more stuff. For this instance, alert("Hey there");.

If you think about this scenario again, the async function $.get() is actually not blocking the main thread from processing other lines of code, while $.get() is running behind the scene. Therefore the async programming model is considered to be non-blocking.

The non-blocking concept is also similar to NodeJs's event driven architecture which might be worth a read.

https://nodesource.com/blog/understanding-the-nodejs-event-loop/

Now you're starting to make sense. The question I have for you though, is "What makes a function asynchronous in the first place"? What causes the jquery get request function to split off from the main thread and allows the execution to continue? How would i construct a simple function to be asynchronous on my own? How could I tell that a function is asynchronous before I implement it in my own code? — REAL O G, Jul 12 '16 at 01:18
@GD There are many ways you can turn your function into a async one. 1 way would be to use `promises`, see documentation and example here; https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise If you are doing node programming you can also use the npm module, bluebirdJS, which is also promises. See http://bluebirdjs.com/docs/getting-started.html — Samuel Toh, Jul 12 '16 at 01:26
Is there a way to make the script asynchronous with callbacks alone? — REAL O G, Jul 12 '16 at 15:19

Javascript asynchronous callbacks

1 Answers1