jQuery Deferred()

jQuery는 Promise를 사용하기 위해 Deferred()라는 객체를 제공합니다.
일단 제이쿼리 프로미스의 기본 구조는 프로미스 객체가 완료되었을 때 done 메소드가 호출되고 실패했을 때는 fail, 완료되었건 실패했건 행동이 끝났으면 always가 호출됩니다. 아주 오래 걸리고 복잡한 함수가 다음과 같이 있다고 가정해봅시다.

var longAndComplicatedFunction = function() {
  try {
    // 완료되려면 50초가 걸리는 매우 복잡한 코드
    console.log('성공');
  } catch (err) {
    console.log('실패');
  }
};
longAndComplicatedFunction();
console.log('다음 행동');

이렇게 되면 이 함수의 실행이 끝날 때까지 아무 작업도 할 수 없게 됩니다.

이럴 때, $.Deferred()가 필요합니다.

var longAndComplicatedFunction = function(){
	var deferred = $.Deferred();
  try {
  	deferred.resolve('성공');
  } catch(err) {
  	deferred.reject(err);
  }
  
  return deferred.promise();
};

longAndComplicatedFunction().done(function(msg){
	console.log(msg);
}).fail(function(errmsg){
	console.log(errmsg);
}).always(function(){
	console.log('always!');
});

console.log('다음 작업');

$.Deferred()로 객체를 만들고 resolve()는 done()으로, reject()는 fail()로 연결됩니다. always()는 resolve와 reject에 상관 없이 항상 실행되는 코드 부분입니다.

$.when(longAndComplicatedFunction(), longerAndMoreComplicatedFunction()).done(function(result1, result2) {
  console.log(result1, result2);
});

when은 여러 개의 Promise를 parameter로 가집니다. 첫 번째 Promise의 결과는 result1으로, 두 번째 Promise의 결과는 result2로 갑니다.

참고: https://www.zerocho.com/category/jQuery/post/57c90814addc111500d85a19
https://api.jquery.com/category/deferred-object/

Promise : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise