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: stackoverflow.com/questions/9596276/… — Blank
– Blank, Commented Jul 12, 2016 at 0: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
– REAL O G, Commented Jul 12, 2016 at 0:52
Which portion of javascript at Question is being processed "in parallel"? — guest271314
– guest271314, Commented Jul 12, 2016 at 0: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
– REAL O G, Commented Jul 12, 2016 at 1:06

Samuel Toh · Accepted Answer · 2016-07-12 01:19:46Z

1

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/

edited Jul 12, 2016 at 1:19

answered Jul 12, 2016 at 1:12

Samuel Toh

19.5k3 gold badges29 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

REAL O G Over a year ago

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?

Samuel Toh Over a year ago

@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; developer.mozilla.org/en/docs/Web/JavaScript/Reference/… If you are doing node programming you can also use the npm module, bluebirdJS, which is also promises. See bluebirdjs.com/docs/getting-started.html

REAL O G Over a year ago

Is there a way to make the script asynchronous with callbacks alone?

Collectives™ on Stack Overflow

Javascript asynchronous callbacks

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related