0

I'm just beginning to learn about asynchronous JavaScript so I'm not sure if this is a silly question, but I could not find an answer to it directly.

In the examples of asynchronous JS I've seen the asynchronous logic is always called after the synchronus logic, that is to say last. Something like:

function1() {}

asynchronousFunction(){}

function2(){}

Isn't this the equivalent of:

function1(){}

function2(){}

function3(){} //asynchronous function

Isn't an asynchronous call the same as a function call at the top of the stack of the main thread, since the asynchronous call is seems to always be made after anything that is synchronous ?

Thanks for any help on this !

pirs
  • 2,410
  • 2
  • 18
  • 25
PhillVance
  • 1
  • 2
  • An "asynchronous function" typically does start some kind of background process, *and* schedule another function (the callback) to be executed when that process has finished. Just putting the callback call elsewhere in your code (to be executed last) doesn't help anything with getting the process started, or getting it called (with the result!) at the right time. – Bergi Oct 22 '17 at 15:30
  • No it's not the same, the asynchronous function callback when finished and a bunch of sync functions could operate by itselves between the time you start the async function and the response of this async function ... – pirs Oct 22 '17 at 15:42
  • Ah ok I see, so thr process is actually starting when yoh call it and just thr response callback id called after thr main thread? maybe the examples ive seen are just oversimplified. Thanks! – PhillVance Oct 22 '17 at 15:46
  • @PhillVance Well I don't know which example you had seen. Something with `setTimeout` maybe? – Bergi Oct 22 '17 at 16:16

3 Answers3

1

Asynchronous functions in JS are used to do something that requires time, e.g. downloading some data, or calculating something. Of corse you can do it synchronously but your view will freeze, and no one want that.

It is not true that async functions run after all sync. (It starts like normal synch function but end when 'task' is done.

More: Link

You should also read more about AJAX.

3squad
  • 355
  • 3
  • 14
  • It's not that it's not true but it's not a complete explanation. A call to an async function is processed immediately just like a sync function. However, any async process INSIDE that call is queued and not executed at all. Async processes are only checked after all code has been executed which is why it APPEARS to run after all function calls (note that functions are not the only thing that they run after, technically it is more correct to say they run after all statements have been processed) – slebetman Oct 23 '17 at 04:53
1

A Javascript async function starts out as a synchronous function, but differs from regular functions in how it's settled.

Javascript is single-threaded—that is, it can only focus on a single thing at a time. It makes up for this by having promises, which are the main concept on which asynchronous functions are built. When an asynchronous function is called, it creates a promise, which just says, "hey, I'm gonna call back to this later, once foo is done." So, your asynchronous function does complete before it moves onto the next function, but the difference is that it just knows now that it needs to come back later.

The reason it seems your asynchronous function always completes after all the synchronous functions is because, well, it does. Promises are always called after the current run of code, because, again, Javascript can only run on a single thread.

You can read more about promises here.

Cassandra O'Connell
  • 108
  • 1
  • 5
0

Synchronous calls happen line by line. Synchronous lines are called when its previous functions are all called and executed.

Asynchronous calls in javascript wait for some event to take place, before they are called. It schedules the method to be called in future in case a particular event takes place.

Note that asynchronous does not mean the same thing as concurrent or multi-threaded. JavaScript can have asynchronous code, but it is generally single-threaded.

Read more

This is made possible with something called the Event Loop.

Consider the following code snippet.

console.log("1");
setTimeout(() => {
 console.log("2");
},0);
console.log("3");

The output is 

1
3
2

This is because line no. 2 is a asynchronous method call. This method gets added to the queue called event loop and then is dequeued in the future, when the timer ends or when the call stack is empty.

Divya Gupta
  • 1
  • 1