jquery延遲物件是什麼

返回值

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对象。dtd.promise().resolve()方法不存在,因此无法改变状态，然后，我们把回调函数绑定在这个对象上面，而不是原来的deferred对象上面。

这样的好处是，无法改变promise对象的执行状态，要想改变执行状态，只能操作原来的deferred对象。

<span style="font-size: 18px;">deferred.notifyWith()</span>

deferred.notifyWith() 函数用于给定上下文和参数，传递给正在调用的延迟对象上进行的回调函数( progressCallbacks )。

注意：

• 通常，只有延迟对象（Deferred）的创建者才能调用此方法。
• 你可以通过调用 deferred.promise() 返回一个受限的 Promise 对象，来阻止其它代码改变延迟对象的状态或报告它的状态。
• 当 deferred.notifyWith 被调用时， 任何 progressCallbacks 可以通过访问 deferred.then 或者 deferred.progress 来添加。回调 依照他们添加时的顺序执行。

通过 .notifyWith() 传递参数给每个回调函数，当迟延对象已经被 resolved 或被 <br/> rejected 之后，再调用任何 .notifyWith() (或者添加 progressCallbacks) 都会被忽略。

语法

• deferred.notifyWith( context [, args ] )

jQuery 1.7 新增该函数

参数说明

返回值

deferred.notifyWith() 返回的是一个 Deferred 对象

<span style="font-size: 18px;">deferred.reject()</span>

deferred.reject() 函数用于拒绝延迟对象，并根据给定的参数调用任何 failCallbacks 回调函数。

注意：

• 通常只有延迟对象的创建者才可以调用该方法。你可以通过调用 deferred.promise()，返回一个受限的 Promise 对象，来阻止其它代码改变延迟对象的状态或报告它的状态。
• 当延迟对象被 rejected 时，任何通过 deferred.then 或 deferred.fail 添加的 failCallbacks，都会被调用。回调函数按它们被添加时的顺序执行。传递给 deferred.reject() 的 args 参数，会传给每个回调函数。当延迟对象进入 rejected 状态后，任何 failCallbacks 被添加时，就会被立刻执行，并带上传入给 .reject() 的参数。

语法

• deferred.reject( args )

jQuery1.5新增该函数

参数说明

傳回值

deferred.reject() 傳回的是一個Deferred 物件

<span style="font-size: 18px;">deferred.rejectWith( )</span>

deferred.rejectWith() 函數用於拒絕延遲對象，並根據給定的context 和args 參數呼叫任何failCallbacks 回呼函數。

注意：

• 通常只有延遲物件的創建者才可以呼叫該方法。你可以透過呼叫 deferred.promise()，傳回一個受限的 Promise 對象，來阻止其它程式碼改變延遲對象的狀態或報告它的狀態。
• 當延遲物件被 rejected 時，任何透過 deferred.then 或 deferred.fail 新增的 failCallbacks，都會被呼叫。回調函數會依照它們被加入時的順序執行。傳遞給 deferred.reject() 的 args 參數， 會傳給每個回呼函數。當延遲物件進入 rejected 狀態後，任何 failCallbacks 被加入時，就會立刻執行，並帶上傳入給 .reject() 的參數。

語法

• deferred.rejectWith( context [, args ] )

jQuery1.5新增此函數

參數說明

#傳回值

deferred.rejectWith() 回傳的是一個 Deferred 物件

<span style="font-size: 18px;">deferred.resolve()</span>

deferred.resolve() 函式用於解決Deferred（延遲）對象，並根據給定的args參數給完成回調函數doneCallbacks 。

注意：

• 通常只有延遲物件的創建者才可以呼叫該方法。你可以透過呼叫 deferred.promise()，傳回一個受限的 Promise 對象，來阻止其它程式碼改變延遲對象的狀態或報告它的狀態。
• 當延遲物件被 resolved 時，任何透過 deferred.then 或 deferred.done 新增的 doneCallbacks，都會被呼叫。回調函數會依照它們被加入時的順序執行。傳遞給 deferred.resolve() 的 args 參數， 會傳給每個回呼函數。當延遲物件進入 resolved 狀態後，任何 doneCallbacks 被加入時，就會立刻執行，並帶上傳入給 .resolve() 的參數。

語法

• deferred.resolve( args )

jQuery1.5新增此函數

#參數說明

傳回值

deferred.resolve () 傳回的是一個Deferred 物件

<span style="font-size: 18px;">#deferred.resolveWith()</span>

deferred.resolveWith() 函數用於解決Deferred（延遲）對象，並根據給定的context 和args 參數給完成回調函數doneCallbacks 。

注意：

• 通常只有延遲物件的創建者才可以呼叫該方法。你可以透過呼叫 deferred.promise()，傳回一個受限的 Promise 對象，來阻止其它程式碼改變延遲對象的狀態或報告它的狀態。
• 當延遲物件被 resolved 時，任何透過 deferred.then 或 deferred.done 新增的 doneCallbacks，都會被呼叫。回調函數會依照它們被加入時的順序執行。傳遞給 deferred.resolve() 的 args 參數， 會傳給每個回呼函數。當延遲物件進入 resolved 狀態後，任何 doneCallbacks 被加入時，就會立刻執行，並帶上傳入給 .resolve() 的參數。

語法

• deferred.resolveWith( context [, args ] )

jQuery1.5新增此函數

參數說明

傳回值

deferred.resolveWith() 傳回的是一個Deferred 物件

<span style="font-size: 18px;">deferred.state( )</span>

deferred.state() 函數用來決定一個Deferred（延遲）物件的目前狀態。

主要是用於偵錯，例如，在準備拒絕（reject）一個延遲物件前，判斷它是否已經處於 resolved 狀態。

注意：
deferred.state() 方法傳回字串，代表Deferred（延遲）物件的目前狀態。 Deferred 物件可以在三種狀態之一：

• 「pending」 : Deferred 物件是尚未完成狀態 。
• “resolved” : Deferred 物件是在解決狀態，這表示物件的deferred.resolve() 或
  deferred.resolveWith()已被呼叫並且doneCallbacks 已被呼叫（或在被呼叫的過程中）
• “rejected” : Deferred 物件是在被拒絕的狀態，這表示物件的deferred.reject() 或
  deferred. rejectWith() 已被呼叫並且failCallbacks 已被呼叫（或在被呼叫的過程中） 。

語法

• deferred.state()

#jQuery1.7 新增此函數

傳回值

deferred.state() 傳回的是一個String類型

<span style="font-size: 18px;">deferred.pipe() </span>

deferred.pipe() 函數用於過濾and/or 鍊式延遲物件的工具方法。

注意：從jQuery 1.8開始, deferred.pipe() 方法過時。使用 deferred.then() 來代替它。

從jQuery 1.8開始, deferred.pipe() 方法過時. 應該使用deferred.then() 來取代它。

deferred.pipe()方法返回一個新的Promise對象，用於過濾狀態或透過函數返回的延遲對象的值，傳遞給Promise對象對應的done()、fail() 方法
doneFilter和failFilter函數過濾原先deferred（延遲）的解決/拒絕的狀態和值。
從 jQuery 1.7開始,該方法也接受一個progressFilter函數，用來過濾任何存取deferred（延遲）的notify或notifyWith 方法。

這些過濾器可以隨著pipe()返回的promise 物件的done()或fail() 回呼函數的調用，返回一個新值，或返回其它可見物件(Deferred, Promise, 等等) ，這些可見物件傳遞了自身的解決（resolve) / 拒絕(reject)狀態和傳遞給pipe promise 回呼函數的傳回的值。

如果將 null 作為過濾函數，或不指定過濾函數，那麼 pipe promise 被受理（resolve)或被拒絕(reject)時，會使用相同的值作為原始值。

語法

• deferred.pipe( [doneFilter ] [, failFilter ] )

##jQuery1.6新增此函數,1.8過時

deferred.pipe( [doneFilter ] [, failFilter ] [, progressFilter ] )

jQuery1.7新增此函數，1.8過時

返回值

deferred.pipe() 返回的是一个 * Promise对象*

示例&说明

过滤解决值:

var defer = $.Deferred(),
   filtered = defer.pipe(function( value ) {//当延迟对象解决时被调用
       // 传递给 pipe promise 回调函数的返回的值为10
        return value * 2;
    });
defer.resolve( 5 );//延迟对象被解决  调用pipe() return 10
filtered.done(function( value ) {//filtered 传递之前返回的值 10
    alert( "值是(2*5 =) 10: " + value );//弹出框输出：值是(2*5 =) 10:10
});

过滤拒绝值:

var defer = $.Deferred(),
//延迟得到解决时调用回调函数为null
//延迟得到拒绝的回调函数传递值value * 3 给Promise对象filtered 的fail的回调函数
        filtered = defer.pipe( null, function( value ) {
            return value * 3;
        });

    defer.reject( 6 );//延迟对象被拒绝 调用pipe() return 18
    filtered.fail(function( value ) {
     alert( "值是(3*6=)18:" + value );//弹出框输出：值是(3*6 =) 18:18
    });

链任务（？）：

var request = $.ajax( url, { dataType: "json" } ),
    chained = request.pipe(function( data ) {
        //request返回值给url2
        return $.ajax( url2, { data: { user: data.userId } } );
    });

    chained.done(function( data ) {
        // 通过第一个请求取回data值提供给URL2
    });

<span style="font-size: 18px;">deferred.then()</span>

deferred.then() 函数当Deferred（延迟）对象被解决/拒绝或仍在进行中时，调用添加处理程序。

注意：

• 如果没有这种类型的回调是需要的,参数可以为 null 。或者使用.done()，.fail()或者 .progress()设置只有一种未经过滤的状态或值的回调类型。
• 从jQuery 1.8开始, 方法返回一个新的 promise ，可以通过一个函数过滤延迟对象的状态和值，用来替换现在过时的deferred.pipe() 方法。
• 回调是依照他们被添加时的顺序执行的，由于 deferred.then 返回 Promise 对象，可以链接其它的 Promise 对象，包括附加的 .then() 方法。

doneFilter 和 failFilter函数过滤原延迟对象的解决/拒绝的状态和值。
progressFilter 函数过滤任何调用原有的延迟对象的notify 和 notifyWith的方法。
这些过滤器函数可以返回一个新的值传递给的 Promise 对象的.done() 或 .fail() 回调，或他们可以返回另一个观察的对象（延迟对象，Promise 对象等）传递给它的解决/拒绝的状态和值,Promise 对象的回调。
如果过滤函数是空，或没有指定，promise（承诺）将得到与原来值相同解决（resolved）或拒绝（rejected）。

语法

• deferred.then( doneFilter [, failFilter ] [, progressFilter ] )

  jQuery1.8新增该函数

• deferred.then^1.8-( doneCallbacks, failCallbacks)

  jQuery1.5新增该函数,1.8移除

• deferred.then^1.8-( doneCallbacks, failCallbacks[, progressFilter ] )

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

<span style="font-size: 18px;">deferred.catch()</span>

当Deferred对象被拒绝(reject)时，调用通过deferred.catch()添加的处理程序。

deferred.catch( fn ) 是 deferred.then( null, fn )的一个别名

语法

• deferred.catch( failCallbacks )

jQuery 3.0 新增该函数

参数说明

返回值

deferred.catch() 返回的是一个 Promise 对象

示例&说明

jQuery.get 方法返回一个jqXHR对象， 它是从Deferred对象派生的，当Deferred对象被拒绝(reject) 时，我们可以使用.catch方法来处理，jQuery示例代码：

$.get( "test.php" )
  .then( function() {
    alert( "$.get succeeded" );
  } )
  .catch( function() {
    alert( "$.get failed!" );
  } );

<span style="font-size: 18px;">deferred.promise()</span>

deferred.promise() 函数返回 Deferred(延迟)的 Promise 对象。

注意：

• 方法允许一个异步函数阻止那些干涉其内部请求的进度（progress）或状态（status）的其它代码。

• Promise 对象只包含 deferred 对象的一组方法，包括：done(),then(),fail(),isResolved(), isRejected(), always(), 这些方法只能观察一个 deferred 的状态；不包括任何用于改变状态的延迟方法(resolve, reject, notify, resolveWith, rejectWith, 和 notifyWith)，因此Promise 对象无法更改 deferred 对象的内在状态

• deferred.promise()也可以接受一个 target 参数，此时传入的 target 将被赋予 Promise 的方法，并作为结果返回，而不是创建一个新对象（这个方法可以用于在已经存在的对象上绑定 Promise 行为的情况）。

语法

• deferred.promise( [target ] )

jQuery 1.5 新增该函数

参数说明

返回值

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";

<span style="font-size: 18px;">.promise()</span>

.promise() 函数返回一个 Promise 对象，观察某种类型被绑定到集合的所有行动，是否已被加入到队列中。

返回的 Promise 被链接到延迟对象上，保存在元素的 .data() 中。由于 .remove() 方法会移除元素上的 data，同时也会移除元素本身。所以，使用它会防止任何元素上未被受理的（unresolved） Promise 被受理（resolving）。如果有必要在元素的 Promise 被受理（resolved）之前，从 DOM 中移除该元素的话，请使用.detach() 来代替。之后再调用 .removeData()

注意：

• .promise() 方法返回一个动态生成的 Promise，当绑定到集合中的所有特定动作（action）已经被加入或未被加入到队列中时，生成的 Promise 将被受理（resolve）。

语法

• .promise( [type ] [, target ] )

jQuery 1.5新增

参数说明

默认情况下， type的值是”fx” ，这意味着返回被受理（resolve）的 Promise 对象的时机，是在所有被选中元素的动画都完成时发生的。

如果提供target参数，.promise()在该参数上添加方法，然后返回这个对象，而不是创建一个新的。它适用于在一个已经存在的对象上添加 Promise 行为的情况。

返回值

.promise()方法返回一个动态生成的 Promise对象。

示例&说明

1.在一个没有激活动画的集合上调用 .promise()
相关的jQuery示例代码：

//在一个没有激活动画的集合上调用 .promise()，返回一个被受理（resolved）的 Promise
var div = $( "<div />" );
    div.promise().done(function( arg1 ) {
        //弹出 "true"
        alert( this === div && arg1 === div );
    });

2.当所有的动画结果时(包括那些在动画回调函数和之后添加的回调函数中初始化的动画），受理（Resolve）返回的 Promise，相关HTML代码 :

<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，相关jQuery代码：

$( "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中文網其他相關文章！