JS中的单线程指的是在同一个时间内只能做一件事情。
好处：避免DOM渲染的冲突。浏览器根据HTML文件初始化需要渲染DOM，JS也可以修改DOM，为了避免两种方式对同一个DOM元素的处理发生冲突，JS执行时，渲染要暂停处理，除此之外，两段JS代码也不能同时执行。
引入的问题：造成页面的卡顿。当页面渲染过程中，执行JS加载某一段数据，需要等到数据加载完毕后浏览器才能继续渲染操作，导致用户体验很差。
如何解决单线程处理的缺陷？——异步
1、setTimeOut（callback , [time]）
直接跳过该段代码，继续执行下面的主线程代码，time毫秒之后把callback函数放入到异步队列中（或者省略掉time，直接把callback函数放入到异步队列）。当主线程的代码执行完毕后，再在异步队列中取函数执行。
2、$.ajax( {url：'xxxxx' ，success：callback })
当遇到ajax代码需要从其他页面加载数据时，也是跳过这段代码，继续在主线程中执行JS代码，当url地址的数据加载完毕后，把callback函数放入异步队列，等待主线程执行完毕后的回调。
好处：释放了加载数据这段空期，代码能够继续执行。
引入的问题：异步的操作没有按照书写的方式执行，可读性差。而且，callback中不容易模块化，当新增需求，只能在callback函数中补充功能的实现，这就违反了开放封闭原则，也不利于测试和维护。
异步的本质——实现方式——event-loop
同步代码在主线程中按次立即执行，遇到异步函数时则略过，当某些事件被触发（比如定时器或者数据加载完毕），则把异步函数放入到异步队列中。最后，当同步代码执行完毕，则启用事件轮询机制，如果在队列中有异步函数，则取出来放入到主线程中运行，如果是空队列，则继续轮询监听异步队列中是否有新的异步函数被插入。
如何解决异步引入的问题？——deferred
这里从jQuery1.5版本前后ajax的特性说起。
jQuery1.5版本前的ajax语法：
var ajax = $.ajax（{
url：'xxxxxxx'，
success：function（）{
xxxxxxxxxxxxxxx
},
error：function（）{
xxxxxxxxxxxxxxx
}
}）
//返回的是一个XHR对象
使用这种方式，当需要回调函数success的代码时，不得不在success代码内部添加，严重影响了代码的安全性。所以，在之后的jQuery1.5版本以后，对这种行为进行了规避：
var ajax = $.ajax（'url'）
ajax.done（function（）{xxxxxx}）.fail（function（）{xxxxxx}）.done（function（）{......}）......
//返回一个deferred对象
或者：
ajax.then（function（）{xxx}，function（）{xxx}）.then（function（）{xxx}，function（）{xxx}）...
//这边引入的ajax.then格式就和之后提出的promise标准很相近了
使用ajax链式操作扩展success或者error代码。
jQuery1.5的变化，从本质上来说它无法改变JS异步和单线程的本质，实际上它是一种语法糖的形式，但是解耦了代码，从写法上杜绝了callback这种形式，很好地体现了开放封闭原则。
如何使用jQuery Deferred？
如下是一段简单的异步操作代码，不利于扩展操作：
var wait = function （） {
var task = function （） {
console.log（'执行完毕'）
}
setTimeOut（task，2000）
}
wait（）
现在新增需求，需要在执行完毕之后进行某些特别复杂的操作，而且可能分为好几个步骤，这里就需要引入deferred对象来进行拓展：
function waitHandle （） {
//创建一个deferred对象
var dtd = $.Deferred（）
//要求传入一个deferred对象
var wait = function （dtd） {
var task = function （） {
console.log（'执行完毕'）
//表示异步任务已经完成
dtd.resolve（）
//表示异步任务失败或出错
dtd.reject（）
}
setTimeOut（task，2000）
//要求返回deferred对象
return dtd
}
//注意：这里一定要有返回值
return wait（dtd）
}
//返回deferred对象
var w = waitHandle（）
//调用deferred对象的then方法。then方法传入两个函数
w.then（function（）{
console.log（‘ok 1’）
}，function（）{
console.log（‘error 1’）
}）.then（function（）{
console.log（‘ok 2’）
}，function（）{
console.log（‘error 2’）
}）
promise对象最初的引入——Deferred.promise()——分离API
如上述代码所示，dtd的API分为两大类，它们的用意不同。
第一类是主动触发的：dtd.resolve（），dtd.reject（）
第二类是被动监听的：dtd.then（），dtd.done（），dtd.fail（）
如果在then前面主动触发resolve或者reject，后面负责监听的API会根据距离最近的监听结果来执行自己相应的代码，发生意想不到的结果。
为了把这两类API分开，引入deferred.promise（）对象：
var wait = function （dtd） {
var task = function （） {
console.log（'执行完毕'）
dtd.resolve（）
dtd.reject（）
}
setTimeOut（task，2000）
//注意这里返回的是promise，而不是deferred对象
return dtd.promise(（）
}
..............
//经过上面的改动，w接收的是一个promise对象
var w = waitHandle（）
$.when(w)
.then（function（）{
console.log（‘ok 1’）
})
.then（function（）{
console.log（‘ok 2’）
})
//此处若执行w.reject会报错，因为promise对象中没有这个方法
ES6中的Promise
浅谈Promise的实现：
Promise 对象用于表示一个异步操作的最终状态（完成或失败），以及其返回的值
一些旧版浏览器不支持Promise，可以在<script>中引入bluebird
异常捕获规定：then（）只能接收一个参数，最后统一由catch捕获异常。
catch不仅能捕获程序逻辑之外语法的错误，还能捕获业务逻辑之内错误，reject需要传入参数，不应该为空参数
result.then(function (img) {
alert(img.width)
}).then(function(img) {
alert(img.height)
}).catch(function(ex) {
alert(ex)
})
多个串联
应用场景：按照顺序执行
var src1 = './imgDemo1.png'
var result1 = loadImg(src1)
var src2 = './imgDemo2.png'
var result2 = loadImg(src2)
result1.then(function (img) {
alert(img.width)
return result2
}).then(function(img) {
alert(img.height)
}).catch(function(ex) {
alert(ex)
})
Promise.all & Promise.race
Promise.all接收一个promise对象的数组
待全部完成之后，统一执行success：
Promise.all（[ result1 ], [ result2 ]）.then（datas=> {
//接收到的datas是一个数组，依次包含多个promise返回的内容
console.log（datas[ 0 ]）
console.log（datas[ 1 ]）
}）
Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。
Promise.race接收一个包含多个promise对象的数组
只要有一个完成，就执行success
Promise.all（[ result1 ], [ result2 ]）.then（data=> {
//接收到的data是最先执行完的promise的返回值
console.log（data）
}）
