하은양 믿음군 효실맘 호홍홍집s

callback함수이용하여 순차함수실행적용하기 본문

가벼운 배움/JQuery

callback함수이용하여 순차함수실행적용하기

호홍홍집 2016. 7. 25. 21:45

$.fnAjxPurposeUseTimeList 함수는 끝에 변수로 callback함수를 리턴받는다.
그래서. ajax 실행시 결과값 v_v_chk_result값을 받아서 alert하는 예제이다.

<script type="text/javascript">
$(document).ready(function(){
 $.fnAjxPurposeUseTimeList = function(vMem, vItem, vDate, vPPid, callback){

  $.ajax({
   url : '/ajxAgent/ajxPurposeUseTime.jsp',
   type : 'post',
   data : {mem_id: vMem, item_id : vItem, selDate : vDate, pp_id : vPPid},
   dataType : 'json',
   success : function(data){
    // 통신 성공시 실행....
    var v_v_chk_result = 'aaa';
    $.each(data,function(){
     v_v_chk_result = this["chk_result"];
     var v_chk_result = this["chk_result"];
     var v_pp_kind = this["pp_kind"];
     var v_deft_norm = this["deft_norm"];
     var v_deft_val = this["deft_val"];
     var v_deft_chk = this["deft_chk"];
     var v_opt_val = this["opt_val"];
     var v_opt_text = this["opt_text"];
     var v_opt_val2 = this["opt_val2"];
     var v_opt_text2 = this["opt_text2"];
     var v_msg = this["msg"];

     if(v_chk_result != "OK"){
      alert(v_msg);
      return false;
     }else{
      $('#usestime').append("<option value='"+v_opt_val+"'>"+v_opt_text+"</option>");
      if(v_pp_kind == 'B' || v_deft_norm == 'D' || v_pp_kind == 'A'){
       $('#useetime').append("<option value='"+v_opt_val2+"'>"+v_opt_text2+"</option>");
      }else{
       $('#useetime').append("<option value='"+v_opt_val+"'>"+v_opt_text+"</option>");
      }
      $('#pp_kind').val(v_pp_kind);
      $('#deft_norm').val(v_deft_norm);
      $('#deft_val').val(v_deft_val);
      $('#deft_chk').val(v_deft_chk);
     }
    });
    if(typeof callback == "function"){
     callback(v_v_chk_result);   // 콜백함수 실행...
    }
   },
   error : function(xhr,status,error){
    // 통신 실패시 실행....
    // alert(xhr.status + " " + xhr.statusText);
    alert("데이터 불러오는데 실패했습니다.");
   },
   complete : function(data){
    // 통신 실패했어도 최종 완료시 실행...
   }
  });
 }
}); 
</script>

<script type="text/javascript">
 $(document).ready(function(){
  $.fnAjxPurposeUseTimeList('${RSVDATA[0].mem_id}', '${RSVDATA[0].obj_id}', '${RSVDATA[0].seldate}', '${purpose}',
   function(alertMsg){
    alert(alertMsg);
   }
  );
 }); 
</script>