Today's Question:  What's your opinion about Alibaba mooncake incident?        GIVE A SHOUT

Technical Article => Web =>  JavaScript

4 asynchronous programming methods in JavaScript

  sonic0002      2012-12-25 00:55:47      7,050    0    0

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, then 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 modes : Synchronous and Asynchronous.

Synchronous mode is similar to the single thread mode, one task must wait for the 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, then if allowing synchronous execution of HTTP requests, the server performance will drop dramatically.

This article summarizes 4 asynchronous methods in JavaScript, you can write structural ,efficient and maintainable JavaScript programs.

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 we can rewrite f1 and put f2 as f1's callback function.

  function f1(callback){

    setTimeout(function () {

      // f1's task code

      callback();

    }, 1000);

  }

Then we can use

  f1(f2);

With this mode, we can convert the asynchronous operation 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 when execution completes, it will trigger the done event and then execute f2.

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 will not very clear.

3. publish/subscribe

The events above can be understood as signals. We assume 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 subscribe 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 when f1 completes execution, it will send a done signal to the signal center, 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, it's 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 errpr:

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

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

5. Reference link

Asynchronous JS: Callbacks, Listeners, Control Flow Libs and Promises

Author : 阮一峰 Source : http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.html

JAVASCRIPT ASYNCHRONOUS PROGRAMMING EVENT MODEL

  SAVE AS PDF   MARK AS READ   MARK AS IMPORTANT

Share on Facebook  Share on Twitter  Share on Google+  Share on Weibo  Share on Reddit  Share on Digg  Share on Tumblr    Delicious

  RELATED


  0 COMMENT


No comment for this article.


  WRITE ARTICLE

Compilation without error in one shot

By sonic0002