비동기처리와 콜백

콜백 call back

function sortNumber(a,b){
    return a-b;
}
    // 비교 대상인 a와 b가 인자로 전달된다.
    // alert('a :'+a+', b:'+b);
    // a에서 b를 뺀 결과가 음수면 a가 b보다 작고, 0이면 같다.
    // a와 b의 순서를 바꾸면 정렬순서가 반대가 된다.

var numbers = [20, 10, 9,8,7,6,5,4,3,2,1];
alert(numbers.sort(sortNumber)); 
    // 그냥 numbers.sort만 하면 1, 10, 2, 20, 3, ... 이렇게 정렬된다.

• 콜백 함수란, 어떤 이벤트가 발생한 후 수행될 함수를 말한다. 보통 setTimeout 을 이용해서 1초나 2초 뒤에 출력되는 함수로 많이 이용한다.
• 위 예시는 1, 2, 3, 4, 5 순으로 정렬된다.
• sort라는 함수가 가지고있는 첫번째 인자로 전달될 함수에게 기대하는 포맷을 지켜야한다.
• sort 메소드는 return 값이 음수,양수,0인지에 따라서 순서를 정한다.
  
  
  

setTimeout

console.log('Hello');

setTimeout(function() {
console.log('Bye');}, 3000);

console.log('Hello Again');

• setTimeout 은 비동기 방식으로 실행되기 때문에 위의 예시에서 Hello, Hello Again, Bye의 순서로 출력된다. (Bye가 3초 있다가 출력되기 때문에)
  
  
  

비동기처리와 Ajax

function getData() {
	var tableData;
	$.get('https://domain.com/products/1', function(response) {
		tableData = response;
	});
	return tableData;
}

console.log(getData()); // undefined가 출력된다.

• 위에서 $.get 이 제이쿼리의 ajax 이다. ajax 통신은 저 주소에 정보값을 달라고 요청하는 것이다.
• 위에서 undefined가 출력된 이유는, tableData 의 정보를 받기 전에 return tableData 가 실행됐기 때문이다. 이처럼 특정 로직의 실행이 끝날 때까지 기다려주지 않고 다음 코드를 먼저 실행하는 것이 비동기 처리(Asynchronous)이다.
• 참고 : 비동기 처리와 콜백 함수 https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/
  
  
  

콜백함수를 사용한 ajax 코드의 예시

function getData(callbackFunc) {
  $.get('url 주소/products/1', function(response) {
    callbackFunc(response); 
  });
  // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌
}

getData(function(tableData) {
  console.log(tableData); // $.get()의 response 값이 tableData에 전달됨
});