jquery.deferred的用法

最新推荐文章于 2021-10-15 17:31:03 发布

彪哥的文章

最新推荐文章于 2021-10-15 17:31:03 发布

阅读量391

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/houdabiao/article/details/77678050

本文介绍如何使用 jQuery 的 Deferred 对象来解决异步编程中的回调地狱问题。通过具体示例展示了 Deferred 的基本用法，包括 $.Deferred(), $.when() 以及观察者模式的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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();