Javascript异步编程
1、什么是异步(Asynchronous)编程？
相对于同步(Synchronous)而言,异步就是后一个任务不需要等待前一个任务结束就执行，而前一个任务结束以后执行回调函数。
最常见的异步编程有setTimeout函数、 ajax请求等。
如：
for (var i = 1; i <= 3; i++) {
setTimeout(function(){
console.log("#",i);
}, 0);
console.log("*",i);
};
输出的结果是：*1 *2 *3 #4 #4 #4
涉及到的知识点： 异步、闭包、作用域
setTimeout是一个注册事件，在主程序运行结束前，是不会调用的。
就像为某个div绑定一个点击事件一样，在没点击之前，这个事件是不会被触发的。
这就是一个常见的异步编程的例子。
2、异步编程的方法
Ⅰ、回调函数
假设有 f1(); f2(); 两个函数，其中f2()在等待f1()的执行结果。
function f1(f2){
setTimeout(function(){
f2();
}, 1000);
}
代码执行顺序：f1(f2);
优点：f1不会堵塞程序运行，相当于先执行程序的主要逻辑，将耗时的操作推迟执行
缺点：不利于代码的阅读和维护，各个部分之间高度耦合（Coupling），而且每个任务只能指定一个回调函数
Ⅱ、事件监听
f1.on('done', f2);//jQuery写法,当f1发生done事件，就执行f2
function f1(){
setTimeout(function () {
f1.trigger('done');//执行完成后，立即触发done事件
}, 1000);
}
优点：可以绑定多个事件，每个事件可以指定多个回调函数，而且可以"去耦合"（Decoupling），有利于实现模块化
缺点：整个程序都要变成事件驱动型，运行流程会变得很不清晰
Ⅲ、发布/订阅
jQuery.subscribe("done", f2);//f2向jQuery订阅"done"信号
function f1(){
setTimeout(function () {
jQuery.publish("done");//f1执行完成后，向jQuery发布"done"信号，从而引发f2的执行
}, 1000);
}
Ⅳ、Promises对象
它的思想是，每一个异步任务返回一个Promise对象，该对象有一个then方法，允许指定回调函数。比如，f1的回调函数f2,可以写成：
f1().then(f2);
对f1进行如下改写：
function f1(){
var dfd = $.Deferred();
setTimeout(function () {
dfd.resolve();
}, 500);
return dfd.promise;
}
优点：回调函数变成了链式写法，程序的流程可以看得很清楚，可以指定多个回调函数，如：
f1().then(f2).then(f3);
f1().then(f2).fail(f3);
缺点：编写和理解，都相对比较难
附几个概念：
一、事件
事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。
二、注册事件
注册事件分为属性注册和方法注册。
属性注册：1.内嵌在DOM结构里的属性赋值
HTML: <button onclick="sayHello()">点击</button>
JS: function sayHello() {
console.log('hello')
}
2.通过JS来指定元素对象的属性赋值
document.body.onclick = function (e) {
alert("为body注册一个点击事件");
};
方法注册：1.通过addEventListener()方法注册
说明：在JS中，window、document、HtmlElement等对象可以通过addEventListener()方法注册事件的处理程序。
语法：EventTarget.addEventListener(eventName, eventHandler, |useCapture )
参数：
①eventName {string} ：所要注册的事件名称，不区分大小写。此名称不需要像注册事件属性那样前缀加上"on"。如注册鼠标点击事件，写为click。
②eventHandler {function | function Object} ：函数或者函数对象。事件触发时所需要执行的函数；当使用函数对象多次注册同一事件时，只当注册一遍。
③useCapture {boolean} 可选 ：是否处于捕获阶段，默认为false。
多次注册：addEventListener()方法能为同一个对象的同一事件注册多次。当发生此事件时，注册的处理事件程序将按照注册先后顺序执行。
注意：
①IE9之前的IE的不支持此方法，可使用attachEvent()代替。
②若使用相同的事件处理程序对象多次注册在同一个事件上，只算注册一次。
例：
document.body.addEventListener('click',function(e){
console.log('被点击一');
});
document.body.addEventListener('click',function(e){
console.log('被点击二');
});
document.body.click(); // 输出： 被点击一 被点击二
2.通过attachEvent()方法注册
说明：IE9之前的IE版本可通过此方法注册事件。
语法：EventTarget.attachEvent(eventName, eventHandler)
①eventName {string} ：所要注册的事件名称，区分大小写。这里的名称跟事件属性一样，以"on"开头，后面跟着事件名称。如：onclick、onload。
②eventHandler {function | function Object} ：函数或者函数对象。事件触发时所需要执行的函数；当使用函数对象多次注册同一事件时，可注册多次(addEventListener()方法只当注册一次)。
多次注册：attachEvent()方法能为同一个对象的同一事件注册多次。当触发此事件时，也会依次执行。
例：
function sayHellow(){
console.log('hello');
}
document.body.attachEvent('onclick',sayHellow);
document.body.attachEvent('onclick',sayHellow); // sayHellow第二次注册同一事件
document.body.click(); //输出2次sayHellow函数 ：hello hello
二、注销事件
JS中，可调用removeEventListener()[注销addEventListener()] 和 detachEvent()[注销attachEvent()] 来注销元素的某个事件指定的处理程序，也可以给事件属性赋值null来注销此事件的所有绑定。
1.removeEventListener(eventName, function Object)
说明：注销通过addEventListener()注册的事件处理程序。
语法：EventTarget.removeEventListener(eventName, eventHandlerObj)
参数：
①eventName {string} ：所要注销的事件名称，不区分大小写。此名称不需要像注册事件属性那样前缀加上"on"。如注册鼠标点击事件，写为click。
②eventHandlerObj {function Object} ：函数对象。传入一个函数体是没有效果的。
例：
// 注销body click事件的sayHello函数
document.body.removeEventListener('click',sayHello);
2.detachEvent(eventName, function Object)
说明：注销通过attachEvent()注册的事件处理程序。
语法：EventTarget.detachEvent(eventName, eventHandlerObj)
参数：
①eventName {string} ：所要注销的事件名称，区分大小写。这里的名称跟事件属性一样，以"on"开头，后面跟着事件名称。如：onclick、onload。
②eventHandlerObj {function Object} ：：函数对象。传入一个函数体是没有效果的。
例：
// 注销body click事件的sayHello函数
document.body.detachEvent('onclick', sayHello);
3.取消事件
给对象的事件属性赋值为null，可取消此事件的所有注册过的处理事件程序。
例：
// onclick属性赋值为null，相当于注销了onclick事件
document.body.onclick=null;
参考链接：http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.html
http://www.qdfuns.com/notes/17398/e8a1ce8f863e8b5abb530069b388a158/page/.html