[JS] Deferred

$.deferred

 

Promise와 Deferred는 비슷한 목적을 가지고 있으며 비동기 작업을 처리하는 데 사용되는 기술이지만, 사용 방식과 개념적인 차이가 있습니다. Deferred는 jQuery 라이브러리에서 사용되는 개념이고, Promise는 기본 JavaScript의 표준 내장 객체입니다. Deferred는 Promise의 이전 버전과 비슷한 역할을 합니다.

Promise:

• Promise는 ES6(ECMAScript 2015)에서 표준 내장 객체로 추가되었습니다.
  
  
• JavaScript 비동기 처리를 위해 사용되는 객체로, 비동기 작업이 완료되거나 실패했을 때 결과를 처리하는 방법을 제공합니다.
  
  
• Promise 객체는 세 가지 상태를 가질 수 있습니다: "대기 중(pending)", "이행됨(fulfilled)", "거부됨(rejected)".
  
  
• .then(), .catch(), .finally() 등의 메서드를 사용하여 비동기 작업의 성공과 실패, 그리고 최종 처리를 구현합니다.
  
  
• ES6 이후에 추가되어 네이티브로 사용 가능하며, 다양한 브라우저와 환경에서 지원됩니다.

Deferred:

 

• Deferred는 jQuery 라이브러리에서 제공하는 개념으로, 비동기 작업을 처리하기 위한 기능을 제공합니다.
  
  
• jQuery 1.5 이후에 도입되었습니다.
  
  
• Deferred는 Promise와 같은 개념을 제공하지만, 기본적으로 Promise 객체의 하위 집합입니다. (즉, Deferred는 Promise의 일부 기능만 제공하는 것)
  
  
• jQuery의 Deferred 객체는 세 가지 상태를 가질 수 있으며, 비동기 작업이 성공하면 resolve()를 호출하고, 실패하면 reject()를 호출합니다.
  
  
• Deferred 객체를 .promise() 메서드를 통해 Promise로 변환할 수 있습니다.
  
  
• jQuery를 사용하는 프로젝트에서 주로 활용되며, 최신 JavaScript 표준이 아닌 jQuery의 독자적인 구현체입니다.

요약하면, Promise는 표준 JavaScript 내장 객체로 ES6 이후에 추가되었으며, 비동기 작업 처리를 위한 기본적인 구성 요소입니다. 반면에 Deferred는 jQuery 라이브러리에서 제공하는 개념으로, Promise의 일부 기능만을 제공하며 jQuery 프로젝트에서 주로 활용됩니다. 최신 프로젝트에서는 기본적으로 Promise를 사용하는 것이 좋으며, jQuery를 사용하는 경우 Deferred를 활용하여 비동기 작업을 처리할 수 있습니다.

 

function asyncFunction() {
	  const deferred = $.Deferred();

	  setTimeout(() => {
	    const randomNumber = Math.random();
	    if (randomNumber < 0.5) {
	      deferred.resolve(randomNumber); // 비동기 작업 성공
	    } else {
	      deferred.reject(new Error("Random number is greater than or equal to 0.5")); // 비동기 작업 실패
	    }
	  }, 1000);

	  return deferred.promise();
	}

	asyncFunction()
	  .done((result) => {
	    console.log("Resolved:", result);
	  })
	  .fail((error) => {
	    console.error("Rejected:", error.message);
	  })
	  .always(() => {
		console.log("always~~~");  
	  });
	  
	;

 

 

$.when

 

 jQuery.when()은 jQuery 라이브러리의 메서드 중 하나로, 비동기적인 작업을 조정하고 제어하는 데 사용되는 함수입니다. 이 메서드는 여러 개의 비동기적인 작업을 동시에 실행하고, 모든 작업이 완료될 때까지 기다리는 용도로 자주 사용됩니다. 주로 AJAX 요청, 타이머, Promise와 같은 비동기 작업을 처리할 때 유용하게 활용됩니다.

jQuery.when() 메서드는 다음과 같은 동작을 합니다:

 

• 전달된 모든 Deferred 객체나 Promise 객체들이 성공적으로 처리되면, done 상태로 전환됩니다.
• 하나라도 실패하는 작업이 있으면, fail 상태로 전환됩니다.

이러한 특성 때문에 jQuery.when()은 주로 여러 비동기 작업이 모두 완료되었을 때, 특정 동작을 실행하거나 결과를 처리할 때 유용하게 사용됩니다.

 

$.when(asyncFunction(), asyncFunction()).done(function(result1, result2) {
	console.log("done1 : " + result1);
	console.log("done2 : " + result2);
}).fail(function(result1, result2) {
	console.log(result1);
	console.log(result2);
});

 

 

 

 

 

---

https://www.zerocho.com/category/jQuery/post/57c90814addc111500d85a19