deferred对象对于异步函数执行完再执行另一个函数的方法
1.ceshi----$.Deferred()里面是什么函数--setTimeout还是ajax这样算是延迟加载,都会等他们加载完毕以后才执行
2.$.when()括号里面的函数$.ajax(),$.post(),$.get()他们的内部已经实现了deferred,如果是其他的不会正常执行这个函数
3.观察模式,主题和观察者,每个主题都要经过deferred处理,resolve()是发送数据的,观察者是接受数据并且处理的
4.deferred对象就是jQuery的回调函数解决方案
var
index={
/*实现异步执行完了以后再执行下一个异步*/
ceshi:
function(){
$.
Deferred(
index.
wait).
done(
function(){
console.
log(
2);
}).
done(
function(){
setTimeout(
function(){
console.
log(
3);
},
3000);
}).
done(
function(){
setTimeout(
function(){
console.
log(
4);
},
3000);
});
},
wait:
function(
dtd){
setTimeout(
function() {
console.
log(
1);
dtd.
resolve();
},
5000);
return
dtd.
promise();
},
/*$.when()*/
one:
function(
dtd){
setTimeout(
function(){
console.
log(
"执行了one");
dtd.
resolve();
},
5000);
return
dtd.
promise();
},
two:
function(
dtd){
setTimeout(
function(){
console.
log(
"执行了two");
dtd.
resolve();
},
5000);
return
dtd.
promise();
},
oneajax:
function(){
$.
ajax({
url:
'one.json',
type:
"get",
async:
true,
data:{},
success:
function(
e){
console.
log(
"执行了ajaxone");
},
error:
function(){
console.
log(
"错误一")
}
});
},
twoajax:
function(){
},
when:
function(){
$.
when(
$.
ajax({
url:
'two.json',
type:
"get",
async:
true,
data:{},
success:
function(
e){
$(
'.de').
text(
e.
le.
le);
console.
log(
"执行了ajaxtwo");
},
error:
function(){
console.
log(
"错误二")
}
}),
$.
ajax({
url:
'one.json',
type:
"get",
async:
true,
data:{},
success:
function(
e){
$(
".er").
text(
e.
de.
de);
console.
log(
"执行了ajaxone");
},
error:
function(){
console.
log(
"错误一")
}
})).
done(
function(){
var
de=
$(
'.de').
text();
var
le=
$(
'.er').
text();
$.
ajax({
url:
'last.json',
type:
"get",
async:
true,
data:{
"de"
:de,
"le"
:le},
success:
function(
e){
console.
log(
"的");
},
error:
function(){
console.
log(
"错误一");
}
})
$(
".arrage").
text(
"dew");
console.
log(
"执行最后");
});
},
/*观察者模式*/
watch:
function(){
// 定义主题
var
subjectAlice = (
function(){
var
dfd =
$.
Deferred();
var
task =
function(){
// 发布内容
$.
ajax({
url:
'two.json',
type:
"get",
async:
true,
data:{},
success:
function(
e){
$(
'.de').
text(
e.
le.
le);
console.
log(
"hou执行");
dfd.
resolve(
e);
},
error:
function(){
console.
log(
"错误二")
}
});
}
setTimeout(
task,
3000);
return
dfd.
promise();
})();
var
subjectTom = (
function(){
var
dfd =
$.
Deferred();
var
task =
function(){
// 发布内容
$.
ajax({
url:
'one.json',
type:
"get",
async:
true,
data:{},
success:
function(
e){
$(
".er").
text(
e.
de.
de);
console.
log(
"hou执行了ajaxone");
dfd.
resolve(
e);
},
error:
function(){
console.
log(
"错误一")
}
});
}
setTimeout(
task,
1000);
return
dfd.
promise();
})();
var
subjectHou = (
function(){
var
dfd =
$.
Deferred();
var
task =
function(){
// 发布内容
$.
ajax({
url:
'last.json',
type:
"get",
async:
true,
data:{},
success:
function(
e){
console.
log(
"hou的");
dfd.
resolve(
e);
},
error:
function(){
console.
log(
"错误一");
}
});
}
setTimeout(
task,
1000);
return
dfd.
promise();
})();
// 两个观察者
var
fn1 =
function(
content1,
content2){
console.
log(
"fn1: " +
content1 );
console.
log(
"fn12: " +
content2 );
}
var
fn2 =
function(
content1,
content2){
console.
log(
"fn2: " +
content1 );
console.
log(
"fn22: " +
content2 );
}
var
fn3=
function(
content1,
content2,
content3){
console.
log(
"fn3: "+
content1);
console.
log(
"fn3: "+
content2);
console.
log(
"fn32: "+
content3);
}
// 注册观察者
$.
when(
subjectAlice,
subjectTom,
subjectHou).
done(
fn1 ).
done(
fn2 ).
done(
fn3);
},
//
init:
function(){
//this.ceshi();
this.
when();
this.
watch();
},
}
index.
init();