jquery.deferred的用法

来源：互联网发布：淘宝发错货买家不寄回编辑：程序博客网时间：2024/06/06 11:43
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();
阅读全文
0 0