타쿠꺼

Deferred 본문

jQuery/Study

Deferred

kimtaku 2016. 6. 7. 02:06

Deferred 생성


var dfd = $.Deferred(function(deferred) { });
cs


Deferred 객체를 생성한다. 매개변수로 익명함수로 넘기고, 이 익명함수는 Deferred를 반환하기 전 실행된다.

익명함수의 매개변수는 생성자로 넘겨지는 Deferred객체이다.

이렇게 생성된 Deferred는 resolve, reject, notify가 호출되기 전까지 대기상태에 머무른다.

대개는 $.Deferred(); 로 매개변수를 따로 넘기진 않는다.




Deferred.state()


Deferred 객체의 상태에 관한 문자열을 반환한다.

resolve, reject 되지 않았으면 "pending"

notify 되었어도 "pending"

resolve 되었으면 "resolved"

reject 되었으면 "rejected"




resolve & done


Deferred.resolve(arg);
cs


Deferred 객체를 resolve한다. 이 때, 매개변수로 객체를 넘길 수 있다.

doneCallbacks을 호출한다.


Deferred.done(callback1, callback2, ...);
Deferred.done(function(arg) { });
cs



Deferred 객체가 resolve 된 경우 실행될 callback들의 헨들러를 등록한다. 이 때 callback들은 매개변수를 하나 가질 수 있는데, 이 매개변수는 resolve할 때 넘겨진 객체이다.




reject & fail


Deferred.reject(arg);
cs


Deferred 객체를 reject한다. 이 때, 매개변수로 객체를 넘길 수 있다.

failCallbacks을 호출한다.


Deferred.fail(callback1, callback2, ...);
Deferred.fail(function(arg) { });
cs


Deferred 객체가 reject 된 경우 실행될 callback들의 헨들러를 등록한다. 이 때 callback들은 매개변수를 하나 가질 수 있는데, 이 매개변수는 reject할 때 넘겨진 객체이다.




notify & progress


Deferred.notify(arg);
cs


Deferred 객체를 notify한다. 이 때, 매개변수로 객체를 넘길 수 있다.

progressCallbacks을 호출한다.


Deferred.progress(callback1, callback2, ...);
Deferred.progress(function(arg) { });
cs


Deferred 객체가 notify 된 경우 실행될 callback들의 헨들러를 등록한다. 이 때 callback들은 매개변수를 하나 가질 수 있는데, 이 매개변수는 notify할 때 넘겨진 객체이다.




resolve, reject & always


Deferred.always(callback1, callback2, ...);
Deferred.always(function(arg) { });
cs


Deferred 객체가 resolve되거나 reject된 경우 실행될 callback들의 헨들러를 등록한다. 이 때 callback들은 매개변수를 하나 가질 수 있는데, 이 매개변수는 resolve하거나 reject할 때 넘겨진 객체이다.




Deferred.then(done, fail, progress)


then은 resolve 되었을 때, reject 되었을 때, notify 되었을 때 각각의 상태에 따른 콜백을 한번에 등록할 수 있다.


Deferred.then(
    function() { resolve되었을 때 실행 },
    function() { reject되었을 때 실행 }, 
    function() { notify되었을 때 실행 }) 
cs


와 같이 사용할 수 있다.




jQuery.when() & done, reject, progress


$.when(obj1, obj2, ...).done(function(v1, v2, ...) { });
$.when(obj1, obj2, ...).done(callback1, callback2, ...) { });
$.when(obj1, obj2, ...).reject(function(v1, v2, ...) { });
$.when(obj1, obj2, ...).reject(callback1, callback2, ...) { });
$.when(obj1, obj2, ...).progress(function(v1, v2, ...) { });
$.when(obj1, obj2, ...).progress(callback1, callback2, ...) { });
cs


보통 Deferred 객체를 넘기지만, 어떤 오브젝트를 넘겨도 상관없다.

일반 객체를 넘기는 경우 즉시 resolve된 객체를 반환하여 바로 실행된다. (done으로 사용)

Deferred객체를 넘기는 경우 상황에 맞게 사용하면 된다.

단, 여러개의 Deferred객체를 넘기는 경우 여러개의 Deferred객체의 상태는 모두 같아야 한다. (어떤건 resolve, 어떤건 reject이면 안됨)

obj1, obj2에 일반 객체를 넘기면 객체의 프로퍼티 값들은 매개변수 v1.property, v2.property로 각각 접근할 수 있다.

obj1, obj2에 Deferred객체를 넘기면 resolve, reject, progress했을 때 넘겨진 매개변수 값들을 v1, v2로 각각 접근할 수 있다.

익명함수가 아닌 정의된 callback 함수들을 설정하면, callback 함수들은 매개변수를 하나만 가질 수 있고 맨 처음으로 받은 obj1에서 넘겨진 값만 접근할 수 있다.




Deferred.promise()


Deferred객체를 Promise객체로 변환하여 반환한다. 

Promise객체는 Deferred를 상속받은 객체이다. Deferred와 전반적으로 같으나 콜백을 부르는 용도로밖에 사용할 수 없다.

따라서 resolve, reject, notify 등을 할 수 없다.

보통 클로저의 형태로 사용된다.

특정 함수에서 내부적으로 deferred를 처리한 후, 해당 객체를 return dfd.promise()로 리턴하게 한 후, 이를 Deferred.when 등에서 함수를 매개변수로 넘기는 식으로 사용된다.

이렇게 하면 dfd를 외부코드에서 resolve, reject, notify등으로 상태를 조작할 수 없는 장점이 생긴다.


function func() {
    var dfd = $.Deferred();
 
    // dfd처리
 
    return dfd.promise();
}
 
$.when(func()).done, reject, progress..
cs


위와 같이 사용한다.


만약 매개변수로 일반객체를 넘기면, 해당 객체를 Promise객체로 만들어서 사용할 수 있다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var obj = {
    hello: functionname ) {
        alert"Hello " + name );
    }
},
    // Deffered 객체를 만든다.
    defer = $.Deferred();
 
// obj를 Promise객체로 만든다.
defer.promise( obj );
 
// defer를 resolve한다.
defer.resolve( "John" );
 
// obj를 Promise객체처럼 사용할 수 있다.
obj.done(functionname ) {
    // resolve로 받은 매개변수를 출력한다.
    obj.hello( name ); // "Hello John" alert 표시
// obj객체의 메서드를 사용한다.
}).hello( "Karl" ); // "Hello Karl" alert 표시
cs




jQuery.promise() & done



jQuery체이닝으로 사용되며, jQuery집합들이 특정 애니메이션, 프로세스, 큐 등이 끝나는 경우 promise객체를 리턴한다.

따라서 done체이닝을 통해 콜백을 수행할 수 있다.


1
2
3
// 이미지가 모두 사라지기 전에 이미 Work Done이 출력된다.
$("img").delay(2000).fadeOut();
console.log("Work Done!");
cs


1
2
3
// 이미지가 모두 사라져야 Work Done이 출력된다.
$("img").delay(2000).fadeOut()
    .promise().done(function() { console.log("Work Done!"); });
cs





중요한점은, Deferred객체는 1회용이라는 것이다.

'jQuery > Study' 카테고리의 다른 글

each에서 break 하기  (0) 2016.08.03
Comments