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中文網其他相關文章!

实现方法:1、用“$("img").delay(毫秒数).fadeOut()”语句,delay()设置延迟秒数;2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句,通过定时器来延迟。

区别:1、axios是一个异步请求框架,用于封装底层的XMLHttpRequest,而jquery是一个JavaScript库,只是顺便封装了dom操作;2、axios是基于承诺对象的,可以用承诺对象中的方法,而jquery不基于承诺对象。

修改方法:1、用css()设置新样式,语法“$(元素).css("min-height","新值")”;2、用attr(),通过设置style属性来添加新样式,语法“$(元素).attr("style","min-height:新值")”。

增加元素的方法:1、用append(),语法“$("body").append(新元素)”,可向body内部的末尾处增加元素;2、用prepend(),语法“$("body").prepend(新元素)”,可向body内部的开始处增加元素。

删除方法:1、用empty(),语法“$("div").empty();”,可删除所有子节点和内容;2、用children()和remove(),语法“$("div").children().remove();”,只删除子元素,不删除内容。

在jquery中,apply()方法用于改变this指向,使用另一个对象替换当前对象,是应用某一对象的一个方法,语法为“apply(thisobj,[argarray])”;参数argarray表示的是以数组的形式进行传递。

on()方法有4个参数:1、第一个参数不可省略,规定要从被选元素添加的一个或多个事件或命名空间;2、第二个参数可省略,规定元素的事件处理程序;3、第三个参数可省略,规定传递到函数的额外数据;4、第四个参数可省略,规定当事件发生时运行的函数。

去掉方法:1、用“$(selector).removeAttr("readonly")”语句删除readonly属性;2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

WebStorm Mac版
好用的JavaScript開發工具

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

DVWA
Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

禪工作室 13.0.1
強大的PHP整合開發環境