JavaScript 콜백 함수의 활용
JavaScript 에서는 콜백 함수를 아주 쉽게 구현할 수 있고
아주 강력합니다.
특히 AJAX요청과 함께 사용하면 정말 강력한데요.
예를 들어, AJAX요청을 해서 어떤 정보를 가져와
그 가져온 정보로 무엇인가를 처리해주고 싶습니다.
하지만 AJAX특성상 서버의 응답도 영향이 있기 때문에
같은 요청도 같은 컴퓨터일지라도 네트워크 환경 등 여러가지 변수 때문에 반응 속도가 천차만별입니다.
따라서 setTimeout 을 이용한다거나 여러가지 다른 방법도 있겠지만
보다 확실한 방법은 콜백 함수를 이용하는 방법입니다.
콜백함수를 이용하게 되면
"어, 나 이 작업 다 끝났으니까 뭐 할 꺼 있으면 해"
라고 메시지를 전달함으로써 확실히 가져온 데이터를 가지고 처리를 할 수 있게 됩니다.
이제 예제 소스를 보여드리겠습니다.
var getSum = function( callback ) { $.getJSON("/ajax/getInfo", function( data ) { var sum = data.number + data.people; if( typeof callback === "function" ) { callback( sum ); } }); }; getSum(function(sum) { alert( sum ); });
이렇게 해주게 되면 getSum이란 함수를 호출했을 때 ajax 로 값을 가져와 어떤 값들을 처리해서 그 결과값을
콜백 함수로 보내줄 수도 있고 딱히 콜백함수를 통해 보내주는 parameter가 없더라도 콜백함수를 호출해
순차적으로 일을 처리할 수 있게 됩니다.
저 같은 경우에는 Google Maps JavaScript SDK 를 할 때 많이 유용하네요.
또 여러가지 제가 정의한 함수들끼리 데이터 처리를 할 때 어떤 함수의 처리가 반드시 어떤 함수의 처리보다
선행되어야 한다거나 그런 경우에 많이 유용한 것 같네요.
적용 예제)
호출부..
/**
* 편성표 등록 에피소드 리스트 DRAG 이벤트
**/
function fn_EpisodeSortEvent() {
$("#scheduleBody").sortable({
revert : false
, start : function(event, ui) {
startIndex = $("#scheduleBody li").index(ui.item);
}
, stop : function(event, ui) {
if($("#normalTab").attr("class") == 'active'){
console.log("vod");
// VOD 헤더값 재생시간 입력
// 1.fn_getVodUrl(에피소드아이디와,콜백함수)호출
fn_getVodUrl($(ui.item).find("input:hidden[name=original_episode_id]").val(), function(result){
// 2.콜백으로 받은후 fn_getVodDuation(받은값(URL),콜백함수)호출
fn_getVodDuation(result,function(response){
console.log("재생시간 : "+response); // 값 확인
$(ui.item).find("input:hidden[name=duration]").val(Math.floor(response));
console.log("재생시간 : " + $(ui.item).find("input:hidden[name=duration]").val());
var inHtml = "";
inHtml += "<table cellspacing=\"0\" cellspadding=\"0\"><tr>";
inHtml += "<td width=\"5%\"><input type=\"checkbox\" name=\"setStartTime\" onClick=\"javascript:checkboxOnlyOne(this)\" /></td>";
inHtml += "<td width=\"15%;\">";
inHtml += "<input type=\"text\" id=\"programming_start_time\" name=\"programming_start_time\" value=\"00:00:00\" style=\"width:45px; font-size:10px\" />";
inHtml += "<input type=\"hidden\" id=\"programming_end_time\" name=\"programming_end_time\" value=\"\" />";
inHtml += "</td>";
inHtml += "<td width=\"10%;\">" + $(ui.item).find("input:hidden[name=grade_name]").val() + "</td>";
inHtml += "<td class=\"txtlimit\" width=\"28%;\">" + $(ui.item).find("input:hidden[name=subtitle]").val() + "</td>";
inHtml += "<td width=\"15%;\">" + fn_StartTime($(ui.item).find("input:hidden[name=duration]").val()) + "</td>";
inHtml += "<td width=\"20%;\">";
inHtml += "<select id=\"streaming_flag\" name=\"streaming_flag\">";
inHtml += "<option value=\"1\">시간재생</option>";
inHtml += "<option value=\"0\">순차재생</option>";
inHtml += "</select>";
inHtml += "</td>";
inHtml += "<td width=\"10%;\"><img src=\"images/trash_16x16.gif\" onclick=\"fn_ScheduleRemove(this);\" /></td>";
inHtml += "</tr></table>";
inHtml += fn_GetScheduleHidden($(ui.item));
$(ui.item).html(inHtml);
});
});
} else {
console.log("adv");
var inHtml = "";
inHtml += "<table cellspacing=\"0\" cellspadding=\"0\"><tr>";
inHtml += "<td width=\"15%;\">";
inHtml += "<input type=\"text\" id=\"programming_start_time\" name=\"programming_start_time\" value=\"00:00:00\" style=\"width:45px; font-size:10px\" />";
inHtml += "<input type=\"hidden\" id=\"programming_end_time\" name=\"programming_end_time\" value=\"\" />";
inHtml += "</td>";
inHtml += "<td width=\"10%;\">" + $(ui.item).find("input:hidden[name=grade_name]").val() + "</td>";
inHtml += "<td class=\"txtlimit\" width=\"33%;\">" + $(ui.item).find("input:hidden[name=subtitle]").val() + "</td>";
inHtml += "<td width=\"12%;\">" + fn_StartTime($(ui.item).find("input:hidden[name=duration]").val()) + "</td>";
inHtml += "<td width=\"20%;\">";
inHtml += "<select id=\"streaming_flag\" name=\"streaming_flag\">";
inHtml += "<option value=\"1\">시간재생</option>";
inHtml += "<option value=\"0\">순차재생</option>";
inHtml += "</select>";
inHtml += "</td>";
inHtml += "<td width=\"10%;\"><img src=\"images/trash_16x16.gif\" onclick=\"fn_ScheduleRemove(this);\" /></td>";
inHtml += "</tr></table>";
inHtml += fn_GetScheduleHidden($(ui.item));
$(ui.item).html(inHtml);
}
}
});
fn_EpsoideDragEvent();
}
// 1.토큰값붙은 VOD URL 값 체크
function fn_getVodUrl(ep_id, callback){
$.ajax({
url: "https://예제.....1.0.0&os=Android&developer-key=516d644666317a3f206a682e456b5f42",
dataType: 'jsonp',
success: function(data) {
// 인코딩
var param = encodeURIComponent(data["Data"]);
$.ajax({
url: "https://p2-api-v1예제....ode-media/" + ep_id + "?token=" +param
, dataType: 'jsonp'
, success: function(data) {
var resCnt = data["Data"].length - 1;
var resValue = data["Data"][resCnt]["Id"];
if (resValue == null || resValue == "") {
alert("미디어 회차 아이디 획득 실패~~");
return;
}
$.ajax({
url: "https://예제.....dia-streaming/" + resValue + "?protocol=HLS&token=" + param
, dataType: 'jsonp'
, success: function(data) {
var resultUrl = data["Data"]["Url"];
callback(resultUrl); // callBack
},
error: function(xhr) {
console.log('미디어 회차 아이디 획득 실패 - ', xhr);
}
});
},
error: function(xhr) {
console.log('미디어 회차 아이디 획득 실패 - ', xhr);
}
});
},
error: function(xhr) {
console.log('token 생성 실패 - ', xhr);
return;
}
});
}
// 2. URL 값으로 헤더값 파싱.
function fn_getVodDuation(url,callback){
$("#vodDurationCheckTime").val(url);
$.ajax({
type : "post"
, async : false
, contentType : "application/x-www-form-urlencoded;charset=UTF-8"
, url : "vodRuntimeValue.do?"
, data : $("form[name=cpScheduleForm]").serialize()
, dataType : "json"
, success : function(response) {
callback(response.vodDuration);
}
});
}
******************************
자바스크립트 활용 콜백함수.
http://kanetami.tistory.com/entry/자바스크립트코어-콜백함수-callback
'knowledge' 카테고리의 다른 글
| 함수의 아규먼트와 파라미터의 차이 프로그래밍 이야기 2012/11/10 13:47 (0) | 2014.06.02 |
|---|---|
| Encoding (0) | 2014.04.08 |
| http / https (0) | 2014.04.08 |
| COOKIE , Session (0) | 2014.04.08 |
| XML (0) | 2014.04.08 |