ajax 실행 도중 다른 ajax 콜 실행하는 방법이 있을까요?
본문
안녕하세요?
질문 제목이 다소 애매한데, 어떻게 요약해야할지 모르겠네요 ㅠ
아래에 정리해서 질문 드립니다.
1.
쇼핑몰 상품목록 입니다.
2.
300여개 상품들을 먼저 모두 띄우고, 각 아이템에 장바구니에 담기 버튼을 각각 ajax로 불러오도록 했습니다.
버튼이 각 상태에 따라 다른데, 이 상태를 처리하는데 시간이 다소 소요되기에 그렇습니다.
2.
페이지가 로드되면 상품이 주르륵 뜨고, 각 제목 옆에 빙글빙글 도는 로딩 이미지가 표시됩니다.
3.
각 아이템을 jQuery의 $.each()로 돌며 어떤 버튼을 띄울지 처리하는 ajax가 실행됩니다.
4.
ajax의 success 를 통해 버튼 HTML을 불러온 후 로딩 이미지와 .replaceWith() 합니다.
5.
이렇게 생성된 각 버튼은 $(document).delegate('click', '.btn', function () { }); 을 통해 이벤트를 받습니다.
버튼을 클릭하면 두번째 ajax가 돌며 장바구니에 담는 처리를 합니다.
[ 문의사항 ]
상태에 따라 버튼이 알맞게 뜨는 것 (4번) 까지는 문제가 없습니다.
다만 버튼을 클릭했을 때 (5번), 장바구니에 담는 처리를 하는 ajax 처리가 지연됩니다.
$.each 를 통해 차례로 실행되는 첫번째 ajax 처리가 모두 끝나야 실행되네요.
이게 ajax 문제인지, 아니면 $.each 루프가 모두 완료되야 다음 이벤트가 실행되는 것인지 궁금하며,
궁극적으로는 1~4번 프로세스와 5번 프로세스가 서로 관련없이 별개로 처리되었으면 합니다.
고수님들의 도움 절실합니다.
감사합니다.
답변 1
먼저 동기 비동기확인해 보세요
ajax 구문 안에
혹 async : false 로 되어있는지 확인하시고 false 로 되어있으시면
async : true 로 변경해 보세요
