when is javascript synchronous

when is javascript synchronous  using -'javascript,jquery'

I have been under the impression for that JavaScript was always asynchronous.  However, I have learned that there are situations where it is not (ie DOM manipulations).  Is there a good reference anywhere about when it will be synchronous and when it will be asynchronous?  Does jQuery affect this at all?

asked Sep 15, 2015 by EdwinNoblelv
0 votes

3 Answers

0 votes

Javascript is always synchronous and single-threaded meaning if you're executing a Javascript block of code on a page then no other Javascript on that page will currently be executed.

Javascript is only asynchronous in the sense that it can make, for example, AJAX calls. The code will stop executing until the call returns (successfully or in error), at which point the callback will run synchronously. No other code will be running at this point. It won't interrupt any other code that's running.

This same kind of callback operates with Javascript timers.

Describing Javascript as asynchronous is perhaps misleading. Iti's more accurate to say that Javascript is synchronous and single-threaded with various callback mechanisms.

jQuery has an option on AJAX calls to make them synchronously (with the async: false option). It's a beginner error to be tempted to use this as it allows a more traditional programming model that one might be more used to. The reason it's problematic is that this will block all Javascript on the page until it finishes, included all event handlers and timers.

answered Sep 15, 2015 by BroBpa
0 votes

JavaScript is single-threaded, and all the time you work on a normal synchronous code-flow execution.

Good examples of the asynchronous behavior that JavaScript can have are events (user interaction, Ajax request results, etc) and timers, basically actions that might happen at any time.

I would recommend you to give a look to the following article:

That article will help you to understand the single-threaded nature of JavaScript and how timers work internally and how asynchronous JavaScript execution works.


answered Sep 15, 2015 by StefanPayton
0 votes

JavaScript is single threaded and has synchronous execution model. Single threaded means that one command is being executed at a time. Synchronous means one at a time i.e. one line of code is being executed at time in order the code appears. So in JavaScript one thing is happening at a time.

Execution Context

JavaScript engine interacts with other engines in the browser, In JavaScript execution stack there is global context at the bottom and then when we invoke functions JavaScript engine creates new execution contexts for respective functions. When the called function exits its execution context is popped from the stack, and then next execution context is popped and so on...

For example

function abc()

function xyz()
var one = 1;

In the above code, first of all a global execution context will be created and in this context one will be stored and its value will be 1... when xyz() invocation is called then a new execution context will be created and if we had defined any variable in xyz function those variable would be stored in the execution context of xyz(), in xyz function we invoke abc() and then abc() execution context is created and put on the execution stack... Now when abc() finishes its context is popped from stack, then xyz() context is popped from stack and then global context will be popped...

Now about asynchronous callbacks; asynchronous means more than one at a time.

Just like execution stack there is another thing that is in JavaScript engine. It is called Event Queue, when we want to be notified about some event in JavaScript engine we can listen to that event, and that event is placed on the queue. For example an Ajax request event, or HTTP request event.

Whenever the execution stack is empty, like shown in above code example, JavaScript engine periodically looks at the event queue and sees if there is any event to be notified about, for example in queue there were two events in queue an ajax request and a HTTP request, it also looks if there is any function which needs to be run on that event trigger... So the JavaScript engine is notified about the event and knows the respective function to execute on that event... So the JavaScript engine invokes the handler function, in the example case for e.g. AjaxHandler() will be invoked and like always when a function is invoked its execution context is placed on the execution context and now the function execution finishes and the event ajax request is also removed from the event queue... When AjaxHandler() finishes the execution stack is empty so engine again looks at the event queue and runs the event handler function of HTTP request which was next in queue. It is important to remember that event queue is processed only when execution stack is empty.

For example see the code below explaining the execution stack and event queue handling by Javascript engine.

function waitfunction() {
    var a = 5000 + new Date().getTime();
    while (new Date() < a){}
    console.log('waitfunction() context will be popped after this line');

function clickHandler() {
    console.log('click event handler...');   

document.addEventListener('click', clickHandler);

waitfunction(); //a new context for this function is created and placed on the execution stack
console.log('global context will be popped after this line');





Now run the webpage and click on the webpage, and see the output on console. The output will be

wait() context will be popped after this line
global context will be emptied after this line
click event handler...

What is happening is JavaScript engine is running the code synchronously as explained in the execution context portion, the browser is asynchronously putting things in event queue. So the functions which take very long time to complete can interrupt event handling. Things happening in browser like events are handled this way by JavaScript, if there is a listener supposed to run, engine will run it when the execution stack is empty. And events are processed in order they happen, so the asynchronous part is about what is happening outside the engine i.e. what should the engine do when those outside events happen.

So JavaScript is always synchronous.

answered Sep 15, 2015 by IsisKingjyow