jquery延遲物件是什麼
- 青灯夜游原創
- 2022-11-02 17:58:042111瀏覽
jquery延遲物件是“Deferred”，是透過呼叫jQuery.Deferred()方法來建立的可連結的實用物件。延遲物件是可連結的，類似於一個jQuery物件可連結的方式，區別於它有自己的方法；它可註冊多個回調函數到回呼列表，調用回調列表並且傳遞非同步或同步功能的成功或失敗的狀態。
本教學操作環境：windows7系統、jquery3.6.1版本、Dell G3電腦。
jQuery 1.5中介紹了 Deferred 延遲對象，它是透過呼叫 jQuery.Deferred() 方法來建立的可連結的實用對象。它可註冊多個回呼函數到回呼列表，呼叫回呼列表並且傳遞非同步或同步功能的成功或失敗的狀態。
延遲物件是可連結的，類似於一個 jQuery 物件可連結的方式，區別於它有自己的方法。在建立 Deferred 物件之後，您可以使用以下任何方法，直接連結到透過呼叫一個或多個的方法來建立或儲存的物件。
列表
| 函數 | |
|---|---|
| #$.Deferred() | |
| deferred.always() | |
| deferred.done() | |
| deferred.fail() | |
| #deferred.progress() | |
| deferred.isRejected() | 1.8- |
| deferred.isResolved() | 1.8- |
| deferred.notify() | |
| deferred .notifyWith() | |
| deferred.reject() | |
| deferred.rejectWith() | |
| deferred.resolve() | |
| deferred.resolveWith( ) | |
| deferred.state() | |
| deferred.pipe() | |
| deferred.then() | |
| deferred.catch() | |
| deferred.promise() | |
| .promise() |
說明
$.Deferred()
$.Deferred() 是建構函數，用來傳回一個鍊式實用物件方法來註冊多個回調，並且呼叫回調佇列，傳遞任何同步或非同步功能成功或失敗的狀態。
提示：
- $.Deferred() 建構子建立一個新的Deferred（延遲）對象， jQuery.Deferred
可傳遞一個可選的函數，該函數在建構方法返回之前被呼叫並傳遞一個新的Deferred 物件作為函數的第一個參數。例如被呼叫的函數可以使用 deferred.then（）來附加回呼函數。 - 一個 Deferred 物件開始於掛起狀態。任何使用 deferred.then(), deferred.always(),
deferred.done(), 或 deferred.fail() 加到這個物件的回呼函數都是排隊等待執行的。
呼叫 deferred.resolve() 或 eferred.resolveWith() 轉換延遲到解決狀態後立即執行設定的
doneCallbacks 。
呼叫 deferred.reject() 或 deferred.rejectWith() 轉換延遲到拒絕狀態後立即執行設定的 failCallbacks 。一旦物件已經進入了解決或拒絕狀態，它保持該狀態。回調仍然可以添加到已解決或拒絕的 Deferred 物件——它們會立即執行。
語法
- $.Deferred( [beforeStart ] )
jQuery1.5新增此函數
#參數說明
| 參數 | 說明 |
|---|---|
| beforeStart |
個在建構函式傳回之前呼叫的函式
#傳回值jQuery.Deferred()工廠函式創建一個新的deferred物件。
deferred.always()
- 提示：參數可以是一個函數或一個函數陣列。由於 deferred.always() 傳回的是一個 Deferred 對象，所以可以連接其他的延遲物件方法( 這裡是指可以繼續呼叫Deferred物件的方法
語法
deferred.always( alwaysCallbacks [, alwaysCallbacks ] )
| #參數說明 | |
|---|---|
| 說明 |
一個函數或函數數組，當Deferred（延遲）物件被解決或被拒絕時被呼叫
注意: deferred.always()方法接收了Deferred物件.resolve()或.reject()所使用的參數， 這往往是非常不同的。為此， 最好的只用它的行為，而不去檢查他的參數。在大多數情況下， 使用明確 .done() 或 .fail()處理程序，因為他們的參數都是已知的。 傳回值deferred.always()傳回Deferred（延遲）物件範例&說明<span style="font-size: 18px;"></span>jQuery.get（）方法傳回一個來自一個Deferred（延遲）物件的jqXHR對象，我們可以附加一個成功和錯誤使用deferred.always（）方法的回調,jQuery範例程式碼: $.get( "test.php" ).always(function() {
alert( "带有成功和错误的回调参数的$.get方法已完成。" );
})
deferred .done()
- 透過延遲物件函數deferred.done()
- 新增的處理程序。
語法
deferred.done( doneCallbacks [, doneCallbacks ] )
| #參數說明 | |
|---|---|
| 說明 |
返回值
deferred.done() 返回的是一个 Deferred 对象
示例&说明
HTML示例代码:
<button>Go</button> <p>Ready...</p>
jQuery示例代码
function fn1() {
$("p").append(" 1 ");
}
function fn2() {
$("p").append(" 2 ");
}
function fn3(n) {
$("p").append(n + " 3 " + n);
}
var dfd = $.Deferred();//创建一个延迟对象
//添加dfd被解决时需要的被调用的处理函数
dfd
.done( [fn1, fn2], fn3, [fn2, fn1] )// 连接一个函数或者函数数组
.done(function(n) {//可以连接其他的方法
$("p").append(n + " we're done.");
});
//当点击按钮时修改延迟对象的状态为已解决
//此时调用通过deferred.done()添加的延迟对象被受理后的处理函数
$("button").bind("click", function() {
dfd.resolve("and");//输出：1 2 and 3 and 2 1 and we're done.
});<span style="font-size: 18px;">deferred.fail()</span>
当 Deferred （延迟）对象被拒绝时，调用通过deferred.fail()添加的处理程序。
提示：该方法接受一个或者多个参数。 deferred.fail() 返回的是一个 Deferred 对象， 可以连接其他的延迟对象方法（继续调用其他Deferred 对象的方法），包括额外的 .fail() 方法。当 Deferred 对象被拒绝时，通过deferred.fail()添加的回调函数 按它们被添加时的顺序执行，并且可以作为参数传递给如下的方法使用：deferred.resolve() 或 deferred.rejectWith()。
语法
- deferred.fail( failCallbacks [, failCallbacks ] )
jQuery1.5新增该函数
参数说明
| 参数 | 说明 |
|---|---|
| failCallbacks | 可选/Function类型 一个函数或者函数数组，当Deferred（延迟）对象被拒绝时被调用 |
返回值
deferred.fail() 返回的是一个 Deferred 对象
示例&说明
jQuery示例代码
$(function () {
$.get("test.php")
.done(function(){ alert("$.get 成功！"); })//解决时调用
.fail(function(){ alert("$.get 失败!"); });//被拒绝时调用
})<span style="font-size: 18px;">deferred.progress()</span>
deferred.progress() 函数当Deferred（延迟）对象生成进度通知时，调用添加处理程序。
注意：当通过调用 notify 或 notifyWith 使延迟对象产生进度通知时，progressCallbacks 就会被调用。 由于 deferred.progress()返回的是延迟对象，所以其它延迟对象方法可以链接到该对象上(链式调用)。当延迟对象被 resolved 或 rejected 时， 进度回调函数将不再被调用,但是当Deferred （延迟）进入resolved（解决） 或 rejected（拒绝）状态后，新添加任何的progressCallbacks将立即执行，使用的参数被传递给.notify() 或 notifyWith()调用
语法
- deferred.progress( progressCallbacks[,progressCallbacks] )
jQuery 1.7 新增该函数
参数说明
| 参数 | 说明 |
|---|---|
| progressCallbacks | 可选/Function类型 一个函数或者函数数组，当Deferred（延迟）对象生成正在执行中的进度通知时被调用。 |
傳回值
deferred.progress() 傳回的是一個Deferred 物件
<span style="font-size: 18px;">deferred.isRejected( )</span>
deferred.isRejected() 函數用來確定Deferred 物件是否已被拒絕。
從jQuery1.7開始已經過時，請使用 deferred.state() 來取代。
注意：
- 如果 Deferred（延遲）物件是在被拒絕的狀態，則傳回 true。這表示 deferred.reject() 或deferred.rejectWith() 已經在物件上被呼叫過，並且 failCallbacks 已經被呼叫過（或正處於被呼叫的階段）。
- Deferred（延遲）物件可以有三種狀態：掛起（pending），解決（resolved），或拒絕（rejected）;使用 deferred.isResolved() 來判斷延遲物件是否在解決狀態。
語法
- deferred.isRejected()
jQuery 1.5 新增此函數,1.7過時，1.8移除
傳回值
deferred.isRejected() 傳回的是一個Boolean類型
# #deferred.isResolved()<span style="font-size: 18px;"></span>
從jQuery1.7開始已經過時，請使用 deferred.state() 來取代。注意：
- 如果 Deferred（延遲）物件是在被解決的狀態，則傳回 true。這意味著 deferred.resolve() 或 deferred.resolveWith() 已經在物件上被呼叫過，並且 doneCallbacks 已經被呼叫過（或正處於被呼叫的階段）。
- Deferred（延遲）物件可以有三種狀態：掛起（pending），解決（resolved），或拒絕（rejected）;使用 deferred.isRejected() 來判斷延遲物件是否在拒絕狀態。
- deferred.isResolved()
jQuery 1.5 新增該函數,1.7過時，1.8移除傳回值deferred.isResolved() 回傳的是一個
Boolean類型
# #deferred.notify()<span style="font-size: 18px;"></span>deferred.notify() 函數用來定一個參數，傳遞給正在呼叫的延遲物件上的回呼函數( progressCallbacks )。
注意：
通常，只有延遲物件（Deferred）的創建者才能呼叫此方法。- 你可以透過呼叫 deferred.promise() 傳回一個受限的 Promise 對象，來阻止其它程式碼改變延遲對象的狀態或報告它的狀態。
- 當 deferred.notify 被存取時， 任何 progressCallbacks 可以透過存取 deferred.then 或 deferred.progress 來新增。回調依照他們加入時的順序執行。
resolved 或被rejected 之後，再呼叫任何. notify() (或加入progressCallbacks) 都會 被忽略<br><br>#文法
參數說明
| 傳遞一個可選的參數給進行中的回呼（progressCallbacks） |
返回值deferred.notify() 返回的是一个 Deferred 对象 小知识jQuery提供的deferred.promise()方法的作用是，在原来的Deferred 对象上返回另一个 Deferred 对象，即受限制的 Promise 对象，受限制的 Promise 对象只开放与改变执行状态无关的方法（比如done()方法和fail()方法），屏蔽与改变执行状态有关的方法（比如resolve()方法和reject()方法），从而使得执行状态不能被改变。 首先看一个 Deferred对象的执行状态被改变的例子： var dtd = $.Deferred(); // 新建一个Deferred对象
var wait = function(dtd){
var tasks = function(){
alert("执行完毕！");
dtd.resolve(); // 改变Deferred对象的执行状态
};
setTimeout(tasks,5000);
return dtd;
};
$.when(wait(dtd))
.done(function(){ alert("等待执行！"); })
.fail(function(){ alert("出错啦！"); });
//代码的尾部加了一行dtd.resolve()，这就改变了dtd对象的执行状态，因此导致done()方法立刻执行
dtd.resolve();// 改变Deferred对象的执行状态再看一个 Deferred对象返回deferred.promise()的例子： var wait = function(){
var dtd = $.Deferred(); //在函数内部，新建一个Deferred对象
var tasks = function(){
alert("执行完毕！");
dtd.resolve(); // 改变Deferred对象的执行状态
};
setTimeout(tasks,5000);
return dtd.promise(); // 返回promise对象
};
$.when(wait())
.done(function(){ alert("哈哈，成功了！"); })
.fail(function(){ alert("出错啦！"); });wait()函数返回的是promise对象。 这样的好处是，无法改变promise对象的执行状态，要想改变执行状态，只能操作原来的deferred对象。
deferred.notifyWith() 函数用于给定上下文和参数，传递给正在调用的延迟对象上进行的回调函数( progressCallbacks )。 注意：
语法
参数说明
返回值deferred.notifyWith() 返回的是一个 Deferred 对象
deferred.reject() 函数用于拒绝延迟对象，并根据给定的参数调用任何 failCallbacks 回调函数。 注意：
语法
参数说明
傳回值deferred.reject() 傳回的是一個Deferred 物件
deferred.rejectWith() 函數用於拒絕延遲對象，並根據給定的context 和args 參數呼叫任何failCallbacks 回呼函數。 注意：
語法
參數說明
#傳回值deferred.rejectWith() 回傳的是一個 Deferred 物件
deferred.resolve() 函式用於解決Deferred（延遲）對象，並根據給定的args參數給完成回調函數doneCallbacks 。 注意：
語法
#參數說明
傳回值deferred.resolve () 傳回的是一個Deferred 物件
deferred.resolveWith() 函數用於解決Deferred（延遲）對象，並根據給定的context 和args 參數給完成回調函數doneCallbacks 。 注意：
語法
參數說明
傳回值deferred.resolveWith() 傳回的是一個Deferred 物件
deferred.state() 函數用來決定一個Deferred（延遲）物件的目前狀態。 主要是用於偵錯，例如，在準備拒絕（reject）一個延遲物件前，判斷它是否已經處於 resolved 狀態。
語法
傳回值deferred.state() 傳回的是一個String類型
deferred.pipe() 函數用於過濾and/or 鍊式延遲物件的工具方法。 注意： 從jQuery 1.8開始, deferred.pipe() 方法過時. 應該使用deferred.then() 來取代它。 deferred.pipe()方法返回一個新的Promise對象， 這些過濾器可以隨著pipe()返回的promise 物件的done()或fail() 回呼函數的調用，返回一個新值，或返回其它可見物件(Deferred, Promise, 等等) ，這些可見物件 如果將 null 作為過濾函數，或不指定過濾函數，那麼 pipe promise 被受理（resolve)或被拒絕(reject)時，會使用相同的值作為原始值。 語法
##jQuery1.6新增此函數,1.8過時
jQuery1.7新增此函數，1.8過時參數說明
返回值deferred.then() 返回 Promise 对象 示例&说明HTML代码： <button>过滤解决值</button> <p></p> 过滤解决值: var filterResolve = function() {
var defer = $.Deferred(),
//当延迟对象解决时被调用
//过滤解决值给then()的返回Promise对象的完成回调函数
filtered = defer.then(function( value ) {
return value * 2;
});
defer.resolve( 5 );
//添加Promise对象的完成回调函数
filtered.done(function( value ) {
$( "p" ).html( "值是 ( 2*5 = ) 10: " + value );
});
};
$( "button" ).on( "click", filterResolve );过滤拒绝值: var defer = $.Deferred(),
//延迟得到解决时调用回调函数为null
//延迟得到拒绝的，回调函数过滤拒绝值
//传递过滤的拒绝值 value * 3 给then()的返回Promise对象的拒绝回调函数fail
filtered = defer.then( null, function( value ) {
return value * 3;
});
defer.reject( 6 );//延迟对象被拒绝 调用then() return 18
//then()的返回Promise对象添加拒绝回调函数，并获取过滤的拒绝值
filtered.fail(function( value ) {
alert( "值是(3*6=)18:" + value );//弹出框输出：值是(3*6 =) 18:18
});链任务 var request = $.ajax( url, { dataType: "json" } ),
chained = request.then(function( data ) {
//request返回值给url2
return $.ajax( url2, { data: { user: data.userId } } );
});
chained.done(function( data ) {
// 通过第一个请求取回data值提供给URL2
});
当Deferred对象被拒绝(reject)时，调用通过deferred.catch()添加的处理程序。 deferred.catch( fn ) 是 deferred.then( null, fn )的一个别名 语法
参数说明
返回值deferred.catch() 返回的是一个 Promise 对象 示例&说明jQuery.get 方法返回一个jqXHR对象， 它是从Deferred对象派生的，当Deferred对象被拒绝(reject) 时，我们可以使用.catch方法来处理，jQuery示例代码： $.get( "test.php" )
.then( function() {
alert( "$.get succeeded" );
} )
.catch( function() {
alert( "$.get failed!" );
} );
deferred.promise() 函数返回 Deferred(延迟)的 Promise 对象。 注意：
语法
参数说明
返回值deferred.promise() 返回的是一个 Promise 对象 示例&说明创建一个延迟对象，并设定两个延时时间是随机的定时器，分别用于受理（resolve）和拒绝（reject）延迟对象。无论哪一个先执行，都会调用其中一个回调函数。而另一个定时器则不会产生任何效果，因为在最先调用的那个定时器处理中，延迟对象已经处于完成状态(resolved 或 rejected 状态)。同时，还会设定一个定时器进度（progress）通知函数，用于进度通知处理，并在文档的 “body” 中显示 “working…”，以下为一次测试时的jQuery示例代码： function asyncEvent(){
var dfd = new jQuery.Deferred();
var resolveValue=400+Math.random()*2000;
var resolveTime=Math.floor(resolveValue)
console.log("resolveTime"+resolveTime)//resolveTime：1890ms
// 在一个随机的时间间隔之后 Resolve （解决状态）
setTimeout(function(){
dfd.resolve("欢呼");
}, Math.floor(resolveTime));
var rejectValue=400+Math.random()*2000;
var rejectTime=Math.floor(rejectValue)
console.log("rejectTime"+rejectTime)//rejectTime：1364ms
// 在一个随机的时间间隔之后 reject （拒绝状态）
setTimeout(function(){
dfd.reject("对不起");
},rejectTime);
// 每半秒显示一个"working..."消息
setTimeout(function working(){
//"pending" : Deferred 对象是尚未完成状态
//0ms 执行一次 500ms执行一次 1000ms执行一次
//1364ms 执行 dfd.reject("对不起")
//传递拒绝值"对不起" 给拒绝过滤函数 alert( status+', 这次你失败了' );
if ( dfd.state() === "pending" ) {
//向正在执行的Deferred 对象的回调函数列表传递参数
dfd.notify("working... ");
setTimeout(working, 500);
}
}, 1);
// 返回 Promise 对象，调用者不能改变延迟对象
return dfd.promise();
}
// 为异步函数附加一个done, fail, 和 progress 处理程序
//如果向 jQuery.when 传入一个延迟对象，那么会返回它的 Promise 对象(延迟方法的一个子集)
$.when( asyncEvent() ).then(
function(status){
alert( status+', 事情进展顺利' );
},
function(status){
alert( status+', 这次你失败了' );
},
function(status){
$("body").append(status);
}
);使用目标参数,产生现有对象的Promise对象： // 现有对象
var obj = {
hello: function( name ) {
alert( "Hello " + name );
}
},
// 创建一个延迟 Deferred
defer = $.Deferred();
// 设置对象作为 promise
defer.promise( obj );
// Resolve （解决） 该对象
defer.resolve( "John" );
// 使用该对象作为 Promise，向受理列表中添加回调函数
//延迟对象状态为解决，因此done 被调用
obj.done(function( name ) {
obj.hello( name ); //将弹出 "Hello John"
}).hello( "Karl" ); // 将弹出 "Hello Karl";
.promise() 函数返回一个 Promise 对象，观察某种类型被绑定到集合的所有行动，是否已被加入到队列中。
注意：
语法
参数说明
默认情况下， type的值是”fx” ，这意味着返回被受理（resolve）的 Promise 对象的时机，是在所有被选中元素的动画都完成时发生的。 如果提供target参数，.promise()在该参数上添加方法，然后返回这个对象，而不是创建一个新的。它适用于在一个已经存在的对象上添加 Promise 行为的情况。 返回值.promise()方法返回一个动态生成的 Promise对象。 示例&说明1.在一个没有激活动画的集合上调用 .promise() //在一个没有激活动画的集合上调用 .promise()，返回一个被受理（resolved）的 Promise
var div = $( "<div />" );
div.promise().done(function( arg1 ) {
//弹出 "true"
alert( this === div && arg1 === div );
});2.当所有的动画结果时(包括那些在动画回调函数和之后添加的回调函数中初始化的动画），受理（Resolve）返回的 Promise， <style type="text/css">
//没有样式不易观察执行效果，因此添加样式设置
div{
height:100px;
width:200px;
border:2px solid #334455;
margin-top:2px;
}
</style>
<button>Go</button>
<p>准备...</p>
<div></div>
<div></div>
<div></div>
<div></div>当所有的动画结果时(包括那些在动画回调函数和之后添加的回调函数中初始化的动画），受理（Resolve）返回的 Promise， $( "button" ).on( "click", function() {
$( "p" ).append( "已开始..." );
$( "div" ).each(function( i ) {
$( this ).fadeIn().fadeOut( 100 * ( i + 51 ) );
});
$( "div" ).promise().done(function() {
$( "p" ).append( " 完成! " );
});
});
//效果显示好像是等动画执行完成后才执行done()方法使用 $.when() 语句(.promise() 方法使得在 jQuery 集合中实现它变成了可能)，受理（Resolve）返回的 Promise var effect = function() {
return $("div").fadeIn(800).delay(1200).append(" fadeOut! ").fadeOut();
};
$("button").bind( "click", function() {
$("p").append( " 已开始... ");
$.when( effect() ).done(function() {
$("p").append(" 完成! ");
});
//效果显示好像是等动画执行完成后才执行done()方法
});【推荐学习：jQuery视频教程、web前端视频】 |
以上是jquery延遲物件是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！