What does asynchronous JavaScript mean?

JavaScript code is executed in an event loop, on a single thread. The reality is that all JavaScript executes synchronously – it's the event loop that allows you to queue up an action that won't take place until the loop is available some time after the code that queued the action has finished executing. So code is said to execute asynchronoulsy when it is queued to run sometime after the event loop is available.

To understand the difference between synchronous and asynchronous lets write some code which does it both in synchronous and asynchronous way.

response = request.get 'http://www.google.co.in'print response

The above code is a pseudo code in some language. This is how control flows.
The execution path is easy to follow:The get method is executed and the thread of execution waits until a response is received.The response is received from Google and returned to the caller where it’s stored in a variable.The value of the variable (in this case, our response) is output to the consolerequest('http://www.google.co.in', function(error, response, body) {  console.log(body);});console.log('Done!');
The above code is in JavaScript. This is how control flows.
The request function is executed, passing an anonymous function as a callback to execute when a response is available sometime in the future.“Done!” is immediately output to the console.Sometime in the future, the response comes back and our callback is executed, outputting its body to the consoleTo understand asynchronous JavaScript you need to understand a few concepts like EventLoop, Single threaded nature of JavaScript, Callbacks.

while(queue.waitForMessage()){         queue.processNextMessage();}
JavaScript is a single threaded concurrent language. It has a single call stack. Whenever an event is fired it gets queued up in the message Queue. Event Loop checks keeps on checking if there is an event present in the Queue it processes it and removes the event from the queue. So as long as there are events in the Queue, the event loop is active. What happens when there there exists a few events in Queue already? The event gets lined up waiting for its turn. But How does the piece of code knows that the event has been processed at a point of time? Now here comes the concept of Callbacks. You just don't queue the event in Message Queue but a function which gets called when the event has been processed. This function is called callback.So, when does an event is queued up? In web browsers, messages are added any time an event occurs and there is an event listener attached to it. If there is no listener, the event is lost. So a click on an element with a click event handler will add a message–likewise with any other event.Note :
alert is a synchronous statement. It is blocking and should be avoided in code.

Answer by Manish Dipankar:

JavaScript code is executed in an event loop, on a single thread. The reality is that all JavaScript executes synchronously – it's the event loop that allows you to queue up an action that won't take place until the loop is available some time after the code that queued the action has finished executing. So code is said to execute asynchronoulsy when it is queued to run sometime after the event loop is available.

To understand the difference between synchronous and asynchronous lets write some code which does it both in synchronous and asynchronous way.

response = request.get 'http://www.google.co.in'
print response

The above code is a pseudo code in some language. This is how control flows.

  1. The execution path is easy to follow:The get method is executed and the thread of execution waits until a response is received.
  2. The response is received from Google and returned to the caller where it’s stored in a variable.
  3. The value of the variable (in this case, our response) is output to the console
request('http://www.google.co.in', function(error, response, body) {
  console.log(body);
});
console.log('Done!');

The above code is in JavaScript. This is how control flows.

  1. The request function is executed, passing an anonymous function as a callback to execute when a response is available sometime in the future.
  2. “Done!” is immediately output to the console.
  3. Sometime in the future, the response comes back and our callback is executed, outputting its body to the console

To understand asynchronous JavaScript you need to understand a few concepts like EventLoop, Single threaded nature of JavaScript, Callbacks.

while(queue.waitForMessage()){ 
        queue.processNextMessage();
}

  • JavaScript is a single threaded concurrent language. It has a single call stack. Whenever an event is fired it gets queued up in the message Queue. Event Loop checks keeps on checking if there is an event present in the Queue it processes it and removes the event from the queue. So as long as there are events in the Queue, the event loop is active.
  • What happens when there there exists a few events in Queue already? The event gets lined up waiting for its turn. But How does the piece of code knows that the event has been processed at a point of time? Now here comes the concept of Callbacks. You just don't queue the event in Message Queue but a function which gets called when the event has been processed. This function is called callback.
  • So, when does an event is queued up? In web browsers, messages are added any time an event occurs and there is an event listener attached to it. If there is no listener, the event is lost. So a click on an element with a click event handler will add a message–likewise with any other event.

Note :

  • alert is a synchronous statement. It is blocking and should be avoided in code.

What does asynchronous JavaScript mean?

Advertisements

Leave a comment

Filed under Life

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s