jQuery中Deferred的deferred.promise()方法怎么使用

這篇文章主要講解了“jQuery中Deferred的deferred.promise()方法怎么使用”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“jQuery中Deferred的deferred.promise()方法怎么使用”吧！

成都創(chuàng)新互聯(lián)公司長(zhǎng)期為成百上千客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為望都企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)，望都網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

deferred.promise() 和 .promise()

這兩個(gè)API語(yǔ)法幾乎一樣，但是有著很大的差別。deferred.promise()是Deferred實(shí)例的一個(gè)方法，他返回一個(gè)Deferred.Promise實(shí)例。一個(gè)Deferred.Promise對(duì)象可以理解為是deferred對(duì)象的一個(gè)視圖，它只包含deferred對(duì)象的一組方法，包括：done(),then(),fail(),isResolved(), isRejected(), always(),這些方法只能觀察一個(gè)deferred的狀態(tài)，而無(wú)法更改deferred對(duì)象的內(nèi)在狀態(tài)。這非常適合于API的封裝。例如一個(gè)deferred對(duì)象的持有者可以根據(jù)自己的需要控制deferred狀態(tài)的狀態(tài)（resolved或者rejected），但是可以把這個(gè)deferred對(duì)象的Promise對(duì)象返回給其它的觀察者，觀察者只能觀察狀態(tài)的變化綁定相應(yīng)的回調(diào)函數(shù)，但是無(wú)法更改deferred對(duì)象的內(nèi)在狀態(tài)，從而起到很好的隔離保護(hù)作用。

deferred.promise()

$(function(){ 
  // 
  var deferred = $.Deferred(); 
  var promise = deferred.promise(); 
   
  var doSomething = function(promise) { 
    promise.done(function(){ 
      alert('deferred resolved.'); 
    }); 
  }; 
   
  deferred.resolve(); 
  doSomething(promise); 
})

deferred.promise()也可以接受一個(gè)object參數(shù)，此時(shí)傳入的object將被賦予Promise的方法，并作為結(jié)果返回。

// Existing object 
var obj = { 
 hello: function( name ) { 
  alert( "Hello " + name ); 
 } 
}, 
// Create a Deferred 
defer = $.Deferred(); 
 
// Set object as a promise 
defer.promise( obj ); 
 
// Resolve the deferred 
defer.resolve( "John" ); 
 
// Use the object as a Promise 
obj.done(function( name ) { 
 this.hello( name ); // will alert "Hello John" 
}).hello( "Karl" ); // will alert "Hello Karl"

deferred.promise() 只是阻止其他代碼來(lái)改變這個(gè) deferred 對(duì)象的狀態(tài)?？梢岳斫獬桑ㄟ^(guò) deferred.promise() 方法返回的 deferred promise 對(duì)象，是沒(méi)有 resolve ,reject, progress , resolveWith, rejectWith , progressWith 這些可以改變狀態(tài)的方法，你只能使用 done, then ,fail 等方法添加 handler 或者判斷狀態(tài)。

deferred.promise() 改變不了 deferred 對(duì)象的狀態(tài)，作用也不是保證目前的狀態(tài)不變，它只是保證你不能通過(guò) deferred.promise() 返回的 deferred promise 對(duì)象改變 deferred 對(duì)象的狀態(tài)。如果我們這個(gè)地方直接返回 dtd，也是可以工作的，.done 的處理函數(shù)還是會(huì)等到 dtd.resolve() 之后才會(huì)執(zhí)行.

具體在那篇博客的例子, 如果我們把代碼改成如下的形式：

var dtd = $.Deferred(); // 新建一個(gè)deferred對(duì)象
var wait = function(dtd){
  var tasks = function(){
    alert("執(zhí)行完畢！");
    dtd.resolve(); // 改變deferred對(duì)象的執(zhí)行狀態(tài)
  };
  setTimeout(tasks,5000);
  return dtd;
};
$.when(wait(dtd))
.done(function(){ alert("哈哈，成功了！"); })
.fail(function(){ alert("出錯(cuò)啦！"); });

這樣的執(zhí)行結(jié)果和先前返回 dtd.promise 的結(jié)果是一樣的。

差別在什么地方呢？如果我們把 $.when 的這塊的代碼改成這樣的：

var d = wait(dtd);
$.when(d)
.done(function(){ alert("哈哈，成功了！"); })
.fail(function(){ alert("出錯(cuò)啦！"); });
d.resolve();

我們會(huì)發(fā)現(xiàn) alert(“哈哈，成功了！”) 會(huì)立即執(zhí)行，“執(zhí)行完畢”卻需要5秒后才彈出來(lái)。

但是如果我們 wait 函數(shù)最后是 return dtd.promise() 這里 d.resolve() 就會(huì)報(bào)錯(cuò)了，因?yàn)閷?duì)象 d 不存在 resolve() 方法。

同樣如果我們把代碼改成:

var dtd = $.Deferred(); // 新建一個(gè)deferred對(duì)象
var wait = function(dtd){
  var tasks = function(){
　　   alert("執(zhí)行完畢！");
　　   dtd.resolve(); // 改變deferred對(duì)象的執(zhí)行狀態(tài)
　　 };
　　 setTimeout(tasks,5000);
　　 return dtd.promise();
};
dtd.resolve();
$.when( wait(dtd))
.done(function(){ alert("哈哈，成功了！"); })
.fail(function(){ alert("出錯(cuò)啦！"); });

我們也可以發(fā)現(xiàn) alert(“哈哈，成功了！”) 會(huì)立即執(zhí)行，因?yàn)?dtd 這個(gè) deferred 對(duì)象在被傳入 wait 之前，已經(jīng)被 resolve() 了，而 deferred 對(duì)象一旦被 resolve 或者 reject 之后，狀態(tài)是不會(huì)改變的。

然后我們?cè)侔?$.wait 這塊的代碼改成:

$.when( wait(dtd))
.done(function(){ alert("哈哈，成功了！"); })
.fail(function(){ alert("出錯(cuò)啦！"); });
dtd.resolve();

我們也會(huì)發(fā)現(xiàn) alert(“哈哈，成功了！”); 被立即執(zhí)行，雖然 wait(dtd) 執(zhí)行的時(shí)候， dtd 還沒(méi)有被 resolve，而且 wait 方法返回的是 dtd.promise(), 但是 dtd 這個(gè)原始的 deferred 對(duì)象是暴露在外面的，我們還是可以從外面改變它的狀態(tài)。

于是，如果我們真的不想讓其他代碼能改變 wait 方法內(nèi)部的 deferred 對(duì)象的狀態(tài)，那我們應(yīng)該寫(xiě)成這樣：

var wait = function(){
  var dtd = $.Deferred(); // 新建一個(gè)deferred對(duì)象
  var tasks = function(){
    alert("執(zhí)行完畢！");
　　   dtd.resolve(); // 改變deferred對(duì)象的執(zhí)行狀態(tài)
　　 };
　　 setTimeout(tasks,5000);
　　 return dtd.promise();
};
$.when( wait())
.done(function(){ alert("哈哈，成功了！"); })
.fail(function(){ alert("出錯(cuò)啦！"); });

也就是不要把 deferred 直接暴露出來(lái)，最后返回 deferred.promise() ，讓其他地方的代碼只能添加 handler 。

.promise()

首先這不是Deferred實(shí)例的方法！該方法是jQuery實(shí)例的方法。該方法用于一組類型的動(dòng)作（例如動(dòng)畫(huà)）全部完成后返回一個(gè)Promise對(duì)象，供事件監(jiān)聽(tīng)器監(jiān)聽(tīng)其狀態(tài)并執(zhí)行相應(yīng)的處理函數(shù)。

該方法接受兩個(gè)可選參數(shù)：.promise( [type,] [target] )

type：隊(duì)列的類型，默認(rèn)值是fx，fx即jQuery對(duì)象的動(dòng)畫(huà).
targetObject ：要賦予Promise行為的對(duì)象，

這兩個(gè)參數(shù)是可選的。其中第一個(gè)參數(shù)（我）目前除了fx還沒(méi)有找到其他的值類型。因此一般都是用于動(dòng)畫(huà)的監(jiān)控，在動(dòng)畫(huà)完成后做一些操作。

例子：沒(méi)有動(dòng)畫(huà)效果直接返回一個(gè)resolved狀態(tài)的promise對(duì)象

var div = $( "" ); 

div.promise().done(function( arg1 ) { 
 // 將會(huì)被馬上觸發(fā) 
 alert( this === div && arg1 === div ); 
});

例子：在動(dòng)畫(huà)效果全部完成后觸發(fā)done()監(jiān)聽(tīng)函數(shù)

 
 
 
  
  
 
 
  
Go 
Ready...
 
 
 
 
 
 
 
 

感謝各位的閱讀，以上就是“jQuery中Deferred的deferred.promise()方法怎么使用”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)jQuery中Deferred的deferred.promise()方法怎么使用這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

當(dāng)前標(biāo)題：jQuery中Deferred的deferred.promise()方法怎么使用
文章位置：http://m.jiaotiyi.com/article/jhggeo.html