Asynchronous JS: Callbacks, Listeners, Control Flow Libs and Promises
非常好的文章,讲javascript 的异步编程的。
---------------------------------------------------------------------------------
原文:http://sporto.github.io/blog/2012/12/09/callbacks-listeners-promises/
When it comes to dealing with asynchronous development in JavaScript there are many tool you can use. This post explains four of these tools and what their advantages are. These are Callbacks, Listeners, Control Flow Libraries and Promises.
Example Scenario
To illustrate the use of these four tools, let’s create a simple example scenario.
Let’s say that we want to find some records, then process them and finally return the processed results. Both operations (find and process) are asynchronous.

Photo credit: bitzcelt / Foter / CC BY-NC-ND
Callbacks
Let’s start with callback pattern, this is the most basic and the best known pattern to deal with async programming.
A callback looks like this:
1 |
|
In the callback pattern we call a function that will do the asynchronous operation. One of the parameters we pass is a function that will be called when the operation is done.
Setup
In order to illustrate how they work we need a couple of functions that will find and process the records. In the real world these functions will make an AJAX request and return the results, but for now let’s just use timeouts.
1 |
|
Using the callbacks
The code that consumes these functions looks like this:
1 |
|
We call the first function, passing a callback. Inside this callback we call the second function passing another callback.
These nested callbacks can be written more clearly by passing a reference to another function.
1 |
|
In both case the console log above with log [1,2,3,4,5,6]
Working example here:
Pros
- They are a very well know pattern, so they are familiar thus easy to understand.
- Very easy to implement in your own libraries / functions.
Cons
- Nested callbacks will form the infamous pyramid of doom as shown above, which can get hard to read when you have multiple nested levels. But this is quite easy to fix by splitting the functions also as shown above.
- You can only pass one callback for a given event, this can be a big limitation in many cases.

Photo credit: Brandon Christopher Warren / Foter / CC BY-NC
Listeners
Listeners are also a well known pattern, mostly made popular by jQuery and other DOM libraries. A Listener might look like this:
1 |
|
We call a function on an object that adds a listener. In that function we pass the name of the event we want to listen to and a callback function. ‘on’ is one of many common name for this function, other common names you will come across are ‘bind’, ‘listen’, ‘addEventListener’, ‘observe’.
Setup
Let’s do some setup for a listener demonstration. Unfortunately the setup needed is a bit more involving than in the callbacks example.
First we need a couple of objects that will do the work of finding and processing the records.
1 |
|
Note that they are calling a method trigger when the work is done, I will add this method to these objects using a mix-in. Again ‘trigger’ is one of the names you will come across, others common names are ‘fire’ and ‘publish’.
We need a mix-in object that has the listener behaviour, in this case I will just lean on jQuery for this:
1 |
|
Then apply the behaviour to our finder and processor objects:
1 |
|
Excellent, now our objects can take listeners and trigger events.
Using the listeners
The code that consumes the listeners is simple:
1 |
|
Again the console run will output [1,2,3,4,5,6]
Working example here:
Pros
- This is another well understood pattern.
- The big advantage is that you are not limited to one listener per object, you can add as many listeners as you want. E.g.
1 |
|
Cons
- A bit more difficult to setup than callbacks in your own code, you will probably want to use a library e.g. jQuery, bean.js.
Photo credit: Nod Young / Foter / CC BY-NC-SA
A Flow Control Library
Flow control libraries are also a very nice way to deal with asynchronous code. One I particularly like is Async.js.
Code using Async.js looks like this:
1 |
|
Setup (Example 1)
Again we need a couple of functions that will do the work, as in the other examples these functions in the real world will probably make an AjAX request and return the results. For now let’s just use timeouts.
1 |
|
The Node Continuation Passing Style
Note the style used in the callbacks inside the functions above.
1 |
|
The first argument in the callback is null if no error occurs; or the error if one occurs. This is a common pattern in Node.js libraries and Async.js uses this pattern. By using this style the flow between Async.js and the callbacks becomes super simple.
Using Async
The code that will consume these functions looks like this:
1 |
|
Async.js takes care of calling each function in order after the previous one has finished. Note how we can just pass the ‘processor’ function, this is because we are using the Node continuation style. As you can see this code is quite minimal and easy to understand.
Working example here:
Another setup (Example 2)
Now, when doing front-end development it is unlikely that you will have a library that follows the callback(null, results) signature. So a more realistic example will look like this:
1 |
|
It becomes a lot more convoluted but at least you can see the flow going from top to bottom.
Working example here:
Pros
- Usually code using a control flow library is easier to understand because it follows a natural order (from top to bottom). This is not true with callbacks and listeners.
Cons
- If the signatures of the functions don’t match as in the second example then you can argue that the flow control library offers little in terms of readability.

Photo credit: Helmut Kaczmarek / Foter / CC BY-NC-SA
Promises
Finally we get to our final destination. Promises are a very powerful tool, but they are the least understood.
Code using promises may look like this:
1 |
|
This will vary widely depending on the promises library you use, in this case I am using when.js.
Setup
Out finder and processor functions look like this:
1 |
|
Each function creates a deferred object and returns a promise. Then it resolves the deferred when the results arrive.
Using the promises
The code that consumes these functions looks like this:
1 |
|
As you can see, it is quite minimal and easy to understand. When used like this, promises bring a lot of clarity to your code as they follow a natural flow. Note how in the first callback we can simply pass the ‘processor’ function. This is because this function returns a promise itself so everything will just flow nicely.
Working example here:
There is a lot to promises:
- they can be passed around as regular objects
- aggregated into bigger promises
- you can add handlers for failed promises
The big benefit of promises
Now if you think that this is all there is to promises you are missing what I consider the biggest advantage. Promises have a neat trick that neither callbacks, listeners or control flows can do. You can add a listener to promise even when it has already been resolved, in this case that listener will trigger immediately, meaning that you don’t have to worry if the event has already happened when you add the listener. This works the same for aggregated promises. Let me show you an example of this:
This is a huge feature for dealing with user interaction in the browser. In complex applications you may not now the order of actions that the user will take, so you can use promises to track use interaction. See this other post if interested.
Pros
- Really powerful, you can aggregate promises, pass them around, or add listeners when already resolved.
Cons
- The least understood of all these tools.
- They can get difficult to track when you have lots of aggregated promises with added listeners along the way.
Conclusion
That’s it! These are in my opinion the four main tools for dealing with asynchronous code. Hopefully I have help you to understand them better and gave you more options for you asynchronous needs.
Asynchronous JS: Callbacks, Listeners, Control Flow Libs and Promises的更多相关文章
- 异步 JS: Callbacks, Listeners, Control Flow Libs 和 Promises【转载+翻译+整理】
http://sporto.github.io/blog/2012/12/09/callbacks-listeners-promises/ 或 http://www.ruanyifeng.com/bl ...
- 你所必须掌握的三种异步编程方法callbacks,listeners,promise
目录: 前言 Callbacks Listeners Promise 前言 coder都知道,javascript语言运行环境是单线程的,这意味着任何两行代码都不能同时运行.多任务同时进行时,实质上形 ...
- SSIS ->> Control Flow And Data Flow
In the Control Flow, the task is the smallest unit of work, and a task requires completion (success, ...
- Control Flow in Async Programs
Control Flow in Async Programs You can write and maintain asynchronous programs more easily by using ...
- 《CS:APP》 chapter 8 Exceptional Control Flow 注意事项
Exceptional Control Flow The program counter assumes a sequence of values ...
- SSIS的 Data Flow 和 Control Flow
Control Flow 和 Data Flow,是SSIS Design中主要用到的两个Tab,理解这两个Tab的作用,对设计更高效的package十分重要. 一,Control Flow 在Con ...
- Control Flow 如何处理 Error
在Package的执行过程中,如果在Data Flow中出现Error,那么Data Flow component能够将错误行输出,只需要在组件的ErrorOutput中进行简单地配置,参考<D ...
- 关于Control flow
1.一个package包含一个control flow并且一个或多个data flow. (这个项目叫做 Integration services project,提供了三种不同类型的control ...
- Core Java Volume I — 3.8. Control Flow
3.8. Control FlowJava, like any programming language, supports both conditional statements and loops ...
随机推荐
- 介绍shell脚本
简单的说shell就是一个包含若干行Shell或者Linux命令的文件.对于一次编写,多次使用的大量命令,就可以使用单独的文件保存下来, 以便日后使用.通常shell脚本以.sh为后缀.在编写shel ...
- 【Python之路】第七篇--Python基础之面向对象及相关
面向对象基础 基础内容介绍详见一下两篇博文: 面向对象初级篇 面向对象进阶篇 其他相关 一.isinstance(obj, cls) 检查obj是否是类 cls 的对象 class Foo(objec ...
- Codeforces Round #346 (Div. 2) B Qualifying Contest
B. Qualifying Contest 题目链接http://codeforces.com/contest/659/problem/B Description Very soon Berland ...
- python join()阻塞的用法
join()阻塞的用法,用来检测线程有没有完全执行完毕 #!/usr/bin/env python#-*- coding:utf-8 -*-import threadingimport time de ...
- power oj 1557种树[二进制状压DP]
题目链接[https://www.oj.swust.edu.cn/problem/show/1557] 题意:中文题目. 题解:用0,1表示某个位置是否种了树,先算出同一行的有效状态的总数,即开两个1 ...
- 架设自己的FTP服务器 Serv-U详细配置图文教程
转自:http://www.jb51.net/article/31635.htm 所有不是很要求安全的情况下是可以用serv_U的,当然我们也可以通过一些设置,保证serv_u安全运行.这里就分享下s ...
- android 调用.NET WebServices
下载Ksoap2.jar, import org.ksoap2.SoapEnvelope;import org.ksoap2.serialization.*;import org.ksoap2.tra ...
- 利用LinkedList实现洗牌功能
分2步: 1.生成扑克牌. 2.洗牌. package com.dongbin.collection; import java.util.LinkedList; import java.util.Ra ...
- this笔记
在js中,如果this在全局变量和函数中this指window,在在对象中至所挂载的这个对象.
- Rx学习
RXjava学习资料: https://www.gitbook.com/book/yuxingxin/rxjava-essentials-cn/details 如下只是学习笔记而已,后面添加实战案例, ...