jQuery_jquery에서 Deferred의 deferred.promise() 메서드에 대한 심층 분석

deferred.promise() 및 .promise()

이 두 API의 구문은 거의 동일하지만 큰 차이점이 있습니다. deferred.promise()는 Deferred.Promise 인스턴스를 반환하는 Deferred 인스턴스의 메서드입니다. Deferred.Promise 객체는 지연된 객체의 뷰로 이해될 수 있습니다. 여기에는 done(), then(), failure(), isResolved(), isRejected(), Always() , 이러한 메서드는 지연된 개체의 상태를 관찰할 수만 있고 지연된 개체의 내부 상태를 변경할 수는 없습니다. 이는 API 캡슐화에 매우 적합합니다. 예를 들어, 지연된 객체의 소유자는 자신의 필요에 따라 지연된 상태(해결 또는 거부)의 상태를 제어할 수 있지만 이 지연된 객체의 Promise 객체를 다른 관찰자에게 반환할 수 있으며 관찰자는 관찰만 할 수 있습니다. 해당 콜백 함수는 상태를 변경하지만 지연된 객체의 내부 상태를 변경할 수 없으므로 우수한 격리 보호 기능을 제공합니다.

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()는 객체 매개변수를 허용할 수도 있습니다. 이때 들어오는 객체는 Promise 메소드에 할당되어 결과로 반환됩니다.

// 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()는 다른 코드가 이 지연된 객체의 상태를 변경하는 것을 방지합니다. deferred.promise() 메서드가 반환한 지연된 Promise 객체에는 상태를 변경할 수 있는 Resolve, Reject, Progress, ResolveWith, RejectWith, ProgressWith 메서드가 없다는 것을 이해할 수 있습니다. 핸들러를 추가하는 방법 또는 상태를 판단합니다.

deferred.promise()는 지연된 객체의 상태를 변경할 수 없으며 현재 상태가 변경되지 않은 상태로 유지되도록 보장하지도 않습니다. 단지 deferred에서 반환된 지연된 Promise 객체를 통해 지연된 객체의 상태를 변경할 수 없다는 것을 보장할 뿐입니다. 약속하다(). 여기서 dtd를 직접 반환하면 .done 처리 함수는 실행되기 전에 dtd.resolve()까지 기다립니다.

해당 블로그의 특정 예에서 코드를 다음 형식으로 변경하면:

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.promise를 반환한 결과와 동일합니다.

차이점은 무엇인가요? $.when의 코드를 다음과 같이 변경하면:

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

알림("하하, 성공!")은 즉시 실행되지만 "실행 완료" 메시지가 표시되는 데는 5초가 소요됩니다.

그러나 대기 함수가 최종적으로 dtd.promise()를 반환하면 d.resolve()는 객체 d에 해결() 메서드가 없기 때문에 오류를 보고합니다.

마찬가지로 코드를 다음과 같이 변경하면:

var dtd = $.Deferred(); // 新建一个deferred对象
var wait = function(dtd){
  var tasks = function(){
　　   alert("执行完毕！");
　　   dtd.resolve(); // 改变deferred对象的执行状态
　　 };
　　 setTimeout(tasks,5000);
　　 return dtd.promise();
};
dtd.resolve();
$.when( wait(dtd))
.done(function(){ alert("哈哈，成功了！"); })
.fail(function(){ alert("出错啦！"); });

또한 지연된 개체 dtd가 대기 상태로 전달되기 전에 해결()되었기 때문에 경고("하하, 성공했습니다!")가 즉시 실행되고, 지연된 개체가 해결되거나 거부되면 상태가 변경되지 않습니다.

그런 다음 $.wait 코드를 다음과 같이 변경합니다.

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

또한 wait(dtd)가 실행되면 dtd가 해결되지 않고 wait 메서드가 dtd.promise()를 반환하지만, 즉시 실행되는 것을 볼 수 있습니다. 원래 지연된 객체 dtd는 외부에 노출되어 있으며 여전히 외부에서 상태를 변경할 수 있습니다.

따라서 다른 코드가 wait 메소드 내에서 지연된 객체의 상태를 변경하는 것을 정말로 원하지 않는다면 다음과 같이 작성해야 합니다.

var wait = function(){
  var dtd = $.Deferred(); // 新建一个deferred对象
  var tasks = function(){
    alert("执行完毕！");
　　   dtd.resolve(); // 改变deferred对象的执行状态
　　 };
　　 setTimeout(tasks,5000);
　　 return dtd.promise();
};
$.when( wait())
.done(function(){ alert("哈哈，成功了！"); })
.fail(function(){ alert("出错啦！"); });

즉, deferred를 직접 노출하지 않고 최종적으로 deferred.promise()를 반환하므로 다른 코드에서는 핸들러만 추가할 수 있습니다.

.promise()

우선 Deferred 인스턴스 방식이 아닙니다! 이 메소드는 jQuery 인스턴스의 메소드입니다. 이 메소드는 일련의 작업(예: 애니메이션)이 완료된 후 이벤트 리스너가 해당 상태를 모니터링하고 해당 처리 기능을 실행할 수 있도록 Promise 객체를 반환하는 데 사용됩니다.

이 메소드는 두 개의 선택적 매개변수를 허용합니다: .promise( [type,] [target] )

type: 큐의 유형, 기본값은 fx, fx는 jQuery 객체의 애니메이션
targetObject: 할당할 객체 Promise 동작,

이 두 매개변수는 선택사항입니다. 첫 번째 매개변수(me)에는 현재 fx 외에는 다른 값 유형이 없습니다. 따라서 일반적으로 애니메이션을 모니터링하고 애니메이션이 완료된 후 일부 작업을 수행하는 데 사용됩니다.

예: 애니메이션 효과 없이 해결된 상태 Promise 개체를 직접 반환

var div = $( "<div />" ); 

div.promise().done(function( arg1 ) { 
 // 将会被马上触发 
 alert( this === div && arg1 === div ); 
}); 

예: 모든 애니메이션 효과가 완료된 후 done() 청취 기능을 트리거합니다

<!DOCTYPE html> 
<html> 
<head> 
 <style> 
div { 
 height: 50px; width: 50px; 
 float: left; margin-right: 10px; 
 display: none; background-color: #090; 
} 
</style> 
 <script src="http://code.jquery.com/jquery-latest.js"></script> 
</head> 
<body> 
  
<button>Go</button> 
<p>Ready...</p> 
<div></div> 
<div></div> 
<div></div> 
<div></div> 
<script> 
$("button").bind( "click", function() { 
 $("p").append( "Started..."); 
 //每个div执行动画效果 
 $("div").each(function( i ) { 
  $( this ).fadeIn().fadeOut( 1000 * (i+1) ); 
 }); 
 //$("div")包含一组div，在所有的div都完成自己的动画效果后触发done()函数 
 $( "div" ).promise().done(function() { 
  $( "p" ).append( " Finished! " ); 
 }); 
}); 
</script> 
 
</body> 
</html>