4 asynchronous programming methods in JavaScript

You may know the execution environment of JavaScript is single threaded. The so called single thread means only one task can be running at any time, if there are many tasks, they need to be in a queue and wait for the previous task to be completed.

The advantage of this mode is it's easy to implement and the execution environment is relative simple; the disadvantage is that if one task takes long time, the tasks following it must wait in the queue and this will delay other tasks consequently. The end result is the browser may hang.

To solve this issue, JavaScript divides the task execution modes into two : Synchronous and Asynchronous.

Synchronous mode is similar to the single thread mode, one task must wait for tasks completion before it. The execution sequence is the same as the sequence of tasks in the queue; However, asynchronous mode is totally different, every task has a callback function, when the previous task is completed, it will execute the callback function, the task behind it can run at the same time as the previous task. The execution sequence of tasks is different from the sequence of tasks in the queue.

Asynchronous mode is very important, on browser end, the long running operation should be executed asynchronously to avoid not responding. One good example is AJAX, On server side, asynchronous mode is the only possible mode, if the execution environment is single threaded and only synchronous execution of HTTP requests is allowed, the server performance will drop dramatically.

This article summarizes 4 asynchronous methods in JavaScript.

1. Callback methods

This is the basic method for asynchronous programming. Assume there are two functions f1 and f2, the latter will wait for the result of the first one.

f1();
f2();

If f1 is a long running operation, then f1 can be rewritten and f2 can be made as f1's callback function.

function f1(callback){
	setTimeout(function () {
		// f1's task code
		callback();
	}, 1000);
}

Then below call can be made:

f1(f2);

With this mode, the synchronous operation can be converted into asynchronous operation, f1 will not block the program execution, it will execute the main logic first and execute the time consuming operations later.

The advantage of callback function is it's easy to understand and implement; the disadvantage is the code is not readable and maintainable, different components are highly coupled, the workflow is very messy and each task can have only one callback function.

2. Event listener

Another method is event driven mode, the execution of one task doesn't depend on the code order, they wait for one event to happen.

Still use f1 and f2, first, bind one event to f1.

f1.on('done', f2);

The meaning of the above code is if f1 done event occurs, then execute f2.

function f1(){
	setTimeout(function () {
		// f1 task codes
		f1.trigger('done');
	}, 1000);
}

f1.trigger('done') means it will trigger the done event and then execute f2 when execution completes.

The advantage is it's easy to understand and can bind multiple events, each event can have many callback functions and it can decouple which is good for modularization. The disadvantage is the whole program will be event driven, the workflow is not very clear.

3. publish/subscribe

The events above can be understood as signals. Assuming there is a signal center, if one task is completed, it will publish a signal to the signal center, other tasks can subscribe to the signal center to receive specified signals. This is called publish-subscribe pattern or observer pattern.

This pattern has many implementations, next we will show the Tiny Pub/Sub from Ben Alman, this a plugin of jQuery.

First, f2 subscribes done signal to the signal center.

jQuery.subscribe("done", f2);

Then write f1 as

function f1(){
	setTimeout(function () {
		// f1 task codes
		jQuery.publish("done");
	}, 1000);
}

jQuery.publish("done") means it will send a done signal to the signal center when f1 completes execution, then f2 will start to execute.

When f2 completes execution, it can cancel the subscription.

jQuery.unsubscribe("done", f2);

4. Promises object

Promises object is a standard proposed by CommonJS, the purpose is to provide a common interface for asynchronous programming.

For simplicity, its idea is each asynchronous task will return a Promises object, this object has a then method which allows to set the callback function. For example, f1's callback function f2:

ã€€ã€€f1().then(f2);

f1 should be written as:

function f1(){
	var dfd = $.Deferred();
	setTimeout(function () {
		// f1's task codes
		dfd.resolve();
	}, 500);
	return dfd.promise;
}

The advantage is the callback function is chained, the workflow of the program is very clear and it has a complete set of chaining methods which can be used to implement powerful functions.

For example, set multiple callback functions:

f1().then(f2).then(f3);

One more example, if there is error:

f1().then(f2).fail(f3);

One advantage which other three methods don;t have is once one task is completed, if more callback functions are added, they will be executed immediately. The disadvantage is it's not easy to understand.