# 回调地狱
- 因为$.ajax()嵌套过多，导致回调地狱，形成三角形代码
```js
$.ajax({
url: \'https://www.baidu.com\',//随便写的地址，不能使用
type: \'GET\',
success: function (res) {
$.ajax({
url: \'https://www.taobao.com\',//随便写的地址，不能使用
type: \'GET\',
data: {
accountId: 20200515
},
success:function(res){
$.ajax({
url: \'https://www.tencent.com\',//随便写的地址，不能使用
type: \'GET\',
data: {
accountId: 20200515
},
success:function(res){
$.ajax({
url: \'https://www.douban.com\',//随便写的地址，不能使用
type: \'GET\',
data: {
accountId: 20200515
},
success:function(res){
console.log(res);
}
});
}
});
}
});
}
});
```
- $.Deferred()//延迟对象
```js
//做一件异步的事情
function createScore(){
var df = $.Deferred();
setInterval(function(){
var score = Math.random() * 100;
if(score > 90){
df.resolve(\'通过\');//触发done()
}else if(score < 80){
df.reject(\'未通过\');//触发reject()
}else{
df.notify(\'请耐心等候\');//触发progress()
}
}, 1500);
//df.promise()返回一个阉割版的df对象，只能调用done fail progress三个方法
return df.promise();
}
//延迟对象
var df = createScore();
// done:成功; fail:失败; progress:正在进行;
// resolve; reject; notify;
df.done(function(ms){//注册成功的回调函数
console.log("成功" + \' \' + ms);
}).fail(function(ms){//注册失败的回调函数
console.log("失败" + \' \' + ms);
}).progress(function(ms){//注册进行的回调函数
console.log("等待......" + \' \' + ms);
});
```
- $.Deferred().then()
```js
//做一件异步的事情
function createScore(){
var df = $.Deferred();
setInterval(function(){
var score = Math.random() * 100;
if(score > 90){
df.resolve(\'通过\');//触发done()
}else if(score < 80){
df.reject(\'未通过\');//触发reject()
}else{
df.notify(\'请耐心等候\');//触发progress()
}
}, 1500);
//df.promise()返回一个阉割版的df对象，只能调用done fail progress三个方法
return df.promise();
}
//延迟对象
var df = createScore();
// done:成功; fail:失败; progress:正在进行;
// resolve; reject; notify;
df.then(
function(){//注册成功的回调函数
var df = $.Deferred();
setTimeout(function(){
df.resolve("成功");
}, 1500);
return df.promise();
}, function(){//注册失败的回调函数
var df = $.Deferred();
setTimeout(function(){
df.resolve("失败");
}, 1500);
return df.promise();
},function(){//注册进行的回调函数
var df = $.Deferred();
setTimeout(function(){
df.resolve("等待......");
}, 1500);
return df.promise();
}
).then(
function(ms){//注册成功的回调函数
console.log(ms + "resolve");
}, function(ms){//注册失败的回调函数
console.log(ms + "reject");
}, function(ms){//注册进行的回调函数
console.log(ms + "notify");
}
);
```
## 使用then解决回调地狱
```js
(function(){
return $.ajax({
url: \'https://www.baidu.com\',//随便写的地址，不能使用
type: \'GET\'
});
})().then(function(res){//成功
if(res.data.msg == \'success\'){
var df = $.Deferred();
$.each(res.data.arr, function(index, ele){
var $btn = $("button");
$btn.on(\'click\', function(){
df.resolve(this);
});
});
return df.promise();
}
}).then(function(res){//成功
res.css({width:\'100px\',height:\'100px\',background:\'red\'});
return $.ajax({
url: \'https://www.tencent.com\',//随便写的地址，不能使用
type: \'GET\'
});
}).then(function(res){//成功
return $.ajax({
url: \'https://www.douban.com\',//随便写的地址，不能使用
type: \'GET\'
});
});
```
以上是markdown格式的笔记