Callback

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