이번 글은 실무에서 사용 중인 페이지에서 문제가 발생하여, 이번 기회에 for문과 동기,비동기에 대해 정리하고자 글을 작성했다.
문제점은 승인버튼을 누르면 다건처리가 가능한데, 1,2,3 건에 대한 승인 시도시, 2번에 대한 결제취소가 되면 1,3번 건이 승인완료처리가 되지않고 1,2번건이 승인완료 처리가 되는 문제점이 있었다.
성공한건만 승인완료가 되어야 한다!
소스를 보니 문제점은 비동기 처리와 for 루프의 비동기성 문제였다.
for 루프 안에서 ajaxJson(비동기) 함수를 호출하고 있는데, 이 ajaxJson 호출은 기본적으로 비동기로 동작한다. 즉, for 루프는 ajaxJson 호출이 끝나기를 기다리지 않고 즉시 다음 반복으로 넘어간다. 이로 인해 루프가 모두 완료된 후에도 ajaxJson 콜백 함수들이 제각각 실행될 수 있다.
- for문은 빛의 속도로 동작한다.(동기방식이다.)
- for 루프안에 ajaxJson 호출이 있으면, for 문은 ajaxJson이 완료되기를 기다리지 않고, 단순히 ajaxJson 요청만 던져놓고 다음 반복으로 넘어간다.
- ajaxJSon은 느긋하게 답장을 기다린다.(비동기방식이다.)
- ajaxJson 호출에 대한 서버의 응답은 언제 올지 모른다. 호출 순서와 응답 순서가 다를 수 있다.
- 이 시간 차이와 순서 불일치가 문제를 일으킨다. 그래서 동기방식으로 수정하고, 불필요한 소스를 삭제함으로써 이 문제를 해결했다.
동기 방식 : 작업들이 순서대로 한 번에 하나씩 처리되는 방식이다. 이전 작업이 완전히 끝날 때까지 다음 작업은 기다려야 한다. 마치 한줄로 서서 차례를 기다리는 것과 같다.
비동기 방식 : 작업들이 동시에 시작될 수 있고, 특정 작업이 끝나는 것을 기다리지 않고 다른 작업을 진행하는 방식이다. 여러 명이 각자 다른 작업을 동시에 처리하는 것과 같다.
