CallBack 함수란?

콜백함수를 간단하게 이야기하자면
비동기가 끝나고 던지고싶을때 사용한다
 
 
가장 간단한 예시로 Ajax가 있음
=> url통신이 끝난후에 success실행하게 함 => callback
 function fnDelete(){
         if(confirm('삭제하시겠습니까?')){
                  $.ajax({
                     url : '/portal/web/deleteListAjax.do',
                     type : 'post',
                     dataType :'json',
                     traditional: true,
                     data : $('#listForm').serialize(),
                     success : function(response){
                          alert(response.resultStats.resultMsg);
                          fnSelectList();
                          $('#areaModal').modal('hide');
                     },
                     error : function(request,status,error){
                          ajaxJsonErrorAlert(request, status, error);
                  }
            });
      }
 }
 
 
콜백함수를 사용해볼텐데 그전에 일단 setTimeout( )를 이용해서 비동기처리되는 상황을 만들어봄
(A가 3초뒤 실행된다면 3초 기다렸다가 B를 실행하는게 아니라 B먼저 실행되게끔 만들기위해 setTimeout이라는 함수를 사용함)

 

<함수 만들기>
#1
function async() { setTimeout(function() { console.log(1) }, 1000)}
setTimeout함수를 이용해서 함수가 1초뒤에 콘솔에 1이 찍히게 하는 함수의 이름을 async( )
#2
function a ( ) { console.log(2) }
콘솔창에 2가 찍히는 함수의 이름을 a( )
 
두함수를 차례로 실행
async( ); a( ); 
예상 : 1
          2
실제 결과값: 2
                     1
 
 
내가 원하는 결과값은 1
                                   2 을 출력하고싶음
 
비동기처리된 1(3초뒤에 1이 출력되는동안 다른거 출력하도록 비동기처리되어있음)을
기다렸다가 2를 출력하게끔 만들기위해 callback함수 사용하려함
 
callback함수 사용하여 1,2순서대로 출력하기 
 
//콜백함수 만들기(비동기 처리가 끝나고 실행되게끔 만들기위해 고차함수를 사용함)
function async(fn) {setTimeout(function( ) { console.log(1); fn( ) }, 1000)}
//실행
async(a);
//결과값
1
2
 
< 풀이 >
함수
#1번함수
function   async  (    ) { setTimeout ( function  ( ) { console.log(1)          }, 1000)}
#2번함수
function a ( ) { console.log(2) }
 
#1번함수의 인자값에 함수를 넣어주기 = 고차함수 만들기(함수의 인자에 함수가 들어간것)
     function   async  (    ) { setTimeout ( function  ( ) { console.log(1)          }, 1000)}    = > 1번 함수
--> function  async  ( fn ) { setTimeout ( function ( ) { console.log(1);  fn( ) }, 1000 ) }  = > 고차함수
                         익명함수                                                                        fn( )라는 익명함수를 만들어준거임
 
2가 찍히는 a함수를 function   async  (  fn   ) 의 인자값으로 넣어주기
--> async(a);

 
출력:
1
2
 
즉
#1,2를 출력하는 두개의 함수가 있고
function   async  (    ) { setTimeout ( function  ( ) { console.log(1)          }, 1000)}
function a ( ) { console.log(2) }
 
# 실행하면
async( ); a( ); 
#결과값
2
1
#결과값을 
1
2
순서로 받기위해 
#고차함수 콜백함수 사용
function  async  ( fn ) { setTimeout ( function ( ) { console.log(1);  fn( ) }, 1000 ) }  = > 고차함수
                            함수                                                                           익명함수
#실행
async(a);
 
#과정
 2를 출력하는 a라는 함수를 인자로 넘김
function  async  ( a ) { setTimeout ( function ( ) { console.log(1);  a }, 1000 ) }  = > 여기서 a는 함수
#a는 즉 console.log(2) 이거니까 
function  async  ( console.log(2) ) { setTimeout ( function ( ) { console.log(1);  console.log(2) }, 1000 ) } 
 
1초뒤에  
console.log(1);  찍히고
그후에 
console.log(2) 찍힘