<숙제>
유저가 이벤트 응모를 하는데 이 응모는 한 번만 참여가 가능하고 응모권은 1번 부터 4번 까지 있으며 각 응모권은 수량이 제한 되어 있고, 어떠한 조건이 성립 되어야 응모를 할 수 있는 권한이 부여된다. (lo-gin 되어 있는 상태를 기준으로 한다.)
예를 들면, 1번 응모권에는 구매한 내역이 10만원 이상에서 20만원 미만 이라는 조건이다. 그리고 추가로 4번 응모권(40만원 이상)에 응모할 수 있지만 수량이 다 떨어졌을 경우 1, 2, 3번 응모권에도 응모할 수 있는 권한이 부여된다.
view 단에서 실시간으로 체크를 해야 하기에 ajax 를 구현하여 처리를 했다.
<문제>
단순히 응모권 남은 수량 체크 기능을 목적으로 ajax 를 구현하였지만 응모 클릭 시 다시 실시간으로 체크하기 위해 기존의 함수를 수정하여 콜백함수를 사용했다.
(참조 : http://blog.naver.com/PostView.nhn?blogId=xsun2025&logNo=90155966497)
| //초안 function A(응모권번호) { jQuery.ajax({ url: "url" , dataType: "json" , success: function(data) { 처리... } }); } //수정안 function A(응모권번호, ref, callback) { jQuery.ajax({ url: "url" , dataType: "json" , success: function(data) { if( ref == 0 ) { alert("메세지"); } else { callback(data); } } }); } |
이렇게 수정 하니 응모버튼 클릭 시 ajax 결과 값을 재사용 가능했다.
| //응모 클릭 시 function B() { ...생략 A(응모권번호, 1, function(data) { var b1 = data; }); } |
여기서 주의할 점은 비동기인 ajax 이기에 결과 값을 리턴하는데 시간차가 있다는 점이다.
예를 들어 B() 함수에서 전역 변수를 사용한다고 생각해보자.
(script 에서는 전역변수의 개념이 없다고 어디선가 보았지만 자세한 내용은 검색)
var b1; function B() { ...생략 A(응모권번호, 1, function(data) { b1 = data.result; console.log(b1); }); } console.log(b1); |
위 와 같은 코드에서 콘솔에 찍히는 값은 어떻게 출력될까?
하단의 콘솔 값이 먼저 출력되고 이어서 상단의 콘솔 값이 찍히며 하단에 콘솔 값에는 null 이거나 undefined 가 출력되는 것을 알 수 있었다. 결과 값을 서버에서 늦게 전달 받은 b1 변수에는 시간차가 존재하는 것이다.
그렇기에 콜백함수를 사용하여 ajax의 값을 가져온 후 로직을 처리할 때는 선행/후행 처리를 잘 생각하고 로직을 짜야함을 알게 되었다.