How to make ajax calls synchronous in JavaScript without blocking anything using ES6 generators

Have you ever been in a situation where you have more than one calls, but you want them to be fired one by one? I have come across a similar scenario and here I am writing about the solution of the problem.

What this article is NOT about

This is not about something like the code snippet below.

If you use jQuery’s $.ajax() method with async:false you will be able to do what is given in the code snippet above. But this is a dangerous thing to do. As JavaScript is single threaded; this operation of your will entirely hang your application till the server sends the response.

What this article is about

This is about making calls one after another. But till the time server responses for a call the thread will be free to do other operations (but not the second call). The concept of promise or callbacks will remain here. We will create a intermediate way just to make the calling part (you may make any other operation synchronous using the same approach) one after another.

A bit on Generators

JavaScript is moving fast. In ES7 they will provide async keyword to work similar to that in dot net. To do that they already set the basic in ES6. That basic part is called generator. ES6 features are not 100% implemented in all browsers. So it’s better to use ES6 shims if you are working in client side. The current version of node.js already supports generators, so you don’t have to worry if you are a node guy.

Generator functions can use a keyword called yield which can pause the further execution of that particular generator till the .next() function is called.

Simple example

In the above example I have an asyncTask function which performs an async task, which may be an ajax call. I have another generator function named syncRunner which calls the async function and uses yield to halt.

Once the setTimeout() is resolved and the callback is called, I am calling the .next() function of the generator which works as a pause breaker.

Making calls one by one

Suppose you are creating a service to make this synchronous thing for you. That service function will return you a promise which you will handle exactly as you handle your normal async ajax call.

The above piece of code will not fire all the calls in parallel, even though you just called the ajaxSync() function 4 times one by one. This will fire the first call and wait till it gets resolved. After that it will find the; and the generator will resume. Thus the next call will be fired.

The request objects are stored in a array which is working as a queue here and the response callbacks are also stored in another similar queue. You can even use JavaScript’s Object.observe() to handle promise resolve without using the callback queue.


Making JavaScript synchronous is a very bad idea. You can use the web workers if you want to do such task. But the preferred way to make synchronous thing is, just make that portion of your code synchronous which is necessary, not the rest part. This article explained how just the ajax calling part can be made synchronous. If your call 2 has dependency on your call 1; you can do your stuffs accordingly in the success function of call 1. And before firing call 2 you can set things up.

Still having issues?

If you still have issues understanding the above article, please leave a comment below and we will try to address that. In case you need help in your projects or understanding anything related to Programming; contact me, Paul Shan for assistance. Thank you for being a reader of VoidCanvas.

About This Author

Hello! I am Paul Shan, a JavaScript Expert, Full Stack and DevOps Engineer cum Consultant based out of Bengaluru, India.