jQuery Deferred Object 에 좀 더 응용을 하고 싶은 분께 이 팁을 바칩니다.
jQuery Deferred core 객체를 jQuery.Deferred 메서드로 제공합니다. 이를 이용하여 함수를 작성하고, 지연된 결과를 불러옵니다. 자신이 setTimeout 을 불러오거나, jQuery 외 타 플러그인과 연동시 유용하게 사용할 수 있습니다.
$.Deferred(function() { //사용자 정의 함수로 지연된 객체 생성
var self = this; //지연된 객체 자신 참조
setTimeout(function() { //지연 시간 설정
// 여기에 하고자 하는 작업 실행
self.resolve(); //지연 상태를 알림
}, 2000);
});
어때요. 참 쉽죠? 그렇다면 지연된 객체 상태에 따른 콜백은 어떻게 설정할 것인가? 간단합니다.
$.when(first(), second()) //2개의 지연 객체를 실행합니다.
.then(doneCallback, failCallback, progressCallback); //지연된 객체들이 모두 완료/실패/시행중된 상태일때 각각 콜백
.done(callback); //지연된 객체들이 모두 완료된 상태일때 콜백
.fail(callback); //지연된 객체들이 모두 실패된 상태일때 콜백
.always(callback); //지연된 객체들이 상태 변경이 끝난 상태일 때에 (완료/실패 다) 콜백.
어때요. 참 쉽죠?
이 기능이 유용할 때가 있습니다. 그 대표적인 예시가 바로 Ajax로 불러오는 멀티 그리드라던가, 2개 이상의 외부 리소스를 모두 불러온 후 처리할 때에 대한 실행부에 유용합니다. 물론 이런것들은 굳이 커스텀 아니라도 가능은 합니다.
추천 : 