# jQuery를 통해 Ajax 요청 시 전역 로딩스피너 제어 방법

💡이슈

필요할때마다 로딩스피너를 추가하고.. ajax요청이 complete되면 꺼지게 했더니

다른 요청과 동시에 있을때 타이밍이 겹쳐서 아직 내부 ajax가 끝나지 않았는데 스피너가 사라지는 현상이 생겼다.

 

해결 전략

“모든 Ajax가 끝났을 때만 로딩을 끄는” 전역 이벤트를 써야 함.

jQuery에는 이걸 위해
ajaxStart / ajaxStop 이벤트가 있다.

---

해결 코드

$(document).ready() 밖(공용 JS — 예: layout.js)에 딱 한 번 추가하면 된다.

// 모든 Ajax 요청이 시작되면 로딩 표시
$(document).ajaxStart(function () {
    $("body").addClass("loading");
});

// 모든 Ajax 요청이 끝나면 로딩 해제
$(document).ajaxStop(function () {
    $("body").removeClass("loading");
});

 

이렇게 되면 페이지 진입 시 여러 Ajax가 실행되도 모두 끝날때까지 스피너가 유지된다.

---

추가 팁

특정 요청만 로딩 제어하고 싶을 때

만약 일부 Ajax 요청(예: 작은 통계 갱신)은 스피너를 띄우고 싶지 않다면, 해당 요청에서 global: false 옵션을 주면 된다.

$.ajax({
  url: '/small-data',
  global: false, // ajaxStart/ajaxStop 영향을 받지 않음
  success: function(res) { ... }
});