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.resolve() 或 eferred.resolveWith() 轉換延遲到解決狀態後立即執行設定的
doneCallbacks 。
呼叫 deferred.reject() 或 deferred.rejectWith() 轉換延遲到拒絕狀態後立即執行設定的 failCallbacks 。一旦物件已經進入了解決或拒絕狀態,它保持該狀態。回調仍然可以添加到已解決或拒絕的 Deferred 物件——它們會立即執行。
jQuery1.5新增此函數
參數 | 說明 |
---|---|
beforeStart |
個在建構函式傳回之前呼叫的函式
#傳回值jQuery.Deferred()工廠函式創建一個新的deferred物件。
deferred.always()
語法
#參數說明 | |
---|---|
說明 |
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 对象
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()。
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()调用
jQuery 1.7 新增该函数
参数 | 说明 |
---|---|
progressCallbacks | 可选/Function类型 一个函数或者函数数组,当Deferred(延迟)对象生成正在执行中的进度通知时被调用。 |
deferred.progress() 傳回的是一個Deferred 物件
<span style="font-size: 18px;">deferred.isRejected( )</span>
deferred.isRejected() 函數用來確定Deferred 物件是否已被拒絕。
從jQuery1.7開始已經過時,請使用 deferred.state() 來取代。
注意:
jQuery 1.5 新增此函數,1.7過時,1.8移除
deferred.isRejected() 傳回的是一個Boolean類型
# #deferred.isResolved()<span style="font-size: 18px;"></span>
從jQuery1.7開始已經過時,請使用 deferred.state() 來取代。注意:
jQuery 1.5 新增該函數,1.7過時,1.8移除傳回值deferred.isResolved() 回傳的是一個
Boolean類型
# #deferred.notify()<span style="font-size: 18px;"></span>
deferred.notify() 函數用來定一個參數,傳遞給正在呼叫的延遲物件上的回呼函數( progressCallbacks )。
注意:
通常,只有延遲物件(Deferred)的創建者才能呼叫此方法。 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中文網其他相關文章! 本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
使用 Javascript / Jquery 提交表單且不含按鈕
我試圖透過呼叫JavaScript函數並使用JQUERY/PHP執行表單來提交沒有按鈕的表單。我希望表單在後端靜默執行,而無需重新載入頁面。不幸的是,它不斷傳回JavaScript...
來自於 2024-04-06 14:54:03
0
2
421
如何使用 jquery 檢索 HTML 資料表中未選定行的值
我試圖獲取所有未單擊按鈕的行的值。例如,當我單擊第一行上的按鈕時,我想檢索沒有單擊的行的值。 vartable=document.getElementById("all_...
來自於 2024-04-05 09:26:49
0
1
1418
需要一個 jquery 腳本,根據最終用戶的當前選擇從選擇框中移動選定的選項
我有一個HTML頁面,最終用戶可以透過選擇框元素對我們的項目進行排名。請參閱小提琴來觀看簡單的演示:https://jsfiddle.net/Balkanlii/ghecv1j8/...
來自於 2024-04-04 18:40:04
0
1
3528
我已經透過書籤在純 CSS 中創建了一個元素。它已創建,但不可見
我的程式碼如下:g=document.createElement('div');g.setAttribute("id","divcontainer&q...
來自於 2024-04-04 17:27:27
0
1
417
在 Safari/Firefox iOS 上無法傳送表單數據
這適用於除iOS上的Safari/Firefox之外的所有平台:jQuery("#gform_1").one('submit',function(event){...
來自於 2024-04-04 12:53:48
0
1
303
相關專題
更多>
熱門教學
更多>
|