자바스크립트 ajax 로딩바 구현시

JavaScript
1

안녕하세요. 초보 개발자입니다.

목표: 정보조회 사이트에서 조회 버튼을 누르면 로딩바(gif)이 뜨고 사이트에 정보를 뜨면 로딩바가 사라진다.

※ 로딩바가 사라지는 함수는 page.dataTable.init(); 안에 있습니다.
※ page.dataTable.init();은 ajax 통신으로 datable을 만들어 화면에 뿌려준다.
※ page.dataTable.init()이 실행이 되고 화면단에 출력되기까지 5초정도의 시간이 있다.

1번 사항
#(‘btnSearch’).on(‘click’,function(){ // 조회버튼 클릭시 발생되는 이벤트들
var strDate=$(’#startDate’).val(); // 검색시 시작날짜
var endDate=$(’#endDate’).val(); // 검색시 끝나는 날짜
a.showLodingbar(); // 로딩바를 띄워주는 함수
page.dataTable.init(); // 페이지에 정보를 주는 함수
}

2번 사항
#(‘btnSearch’).on(‘click’,function(){ // 조회버튼 클릭시 발생되는 이벤트들
var strDate=$(’#startDate’).val(); // 검색시 시작날짜
var endDate=$(’#endDate’).val(); // 검색시 끝나는 날짜
a.showLodingbar(); // 로딩바를 띄워주는 함수
setTimeout(function() { page.dataTable.init() },200); // 페이지에 정보를 주는 함수
}

1번 사항으로 했을 경우 로딩바가 바로 뜨지 않고 page.dataTable.init()이 실행되고 datatatable에 ajax통신이 시작될때 뜨고 ajax 통신이 종료가 되면 같이 사라집니다. (약 1초정도 로딩바가 실행이 됩니다.)

2번 사항으로 할경우 조회버튼을 누르고 바로 로딩바가 나오며 화면단에 데이터가 나올때 없어집니다.
(약 5초)

궁금한점

  1. 버튼 클릭 후 순차적으로 실행이 되는데 왜 로딩바가 안뜨는 이유가 궁금합니다…
  2. 자바스크립트가 비동기적 스레드라서라는 말이 있는데. 그럴 경우 page.dataTable.init() 이 실행 되고 나서 var startDate, var endDate에 값이 담기는 경우도 생길 수가 있지 않나요?
  3. page.dataTable.init()을 하면 컨트롤러로 가고 서비스로 가서 select문을 날리는데 왜 이때는 로딩바가 뜨지 않는걸까요…
2

에이작스 내부에 beforesend 이용해서 해보세요
그리고 어떤 플러그인 쓰신지 모르겠지만 아작스 쓸때 보통은 beforesend 로 합니다 개발에 따라서 방법도 다르지만 보통 그렇게 해요

3

  1. a.showLoadingBar() 함수 자체가 비동기 작업일 경우 page.dataTable.init() 함수에 의해 작업 큐 뒤로 밀릴 수 도 있습니다. 2번 코드처럼 setTimeout으로 강제로 init()을 작업 큐 뒤쪽으로 미뤘을때 showLoadingBar가 선 실행 되는걸 봐서는 짐작이 맞는것 같은데 정확히는 showLoadingBar() 함수 구현이 어떻게 돼있는지 봐야 알 수 있겠네요.

  2. 비동기적 스레드라는 표현은 잘 이해가 되진 않지만 init()의 함수가 strDate, endDate에 새로운 값을 할당할 수 도 있습니다. 더군다나 var 선언이면 더욱 그럴 수 도 있구요, 다만 말이 그렇다는거지 그렇게 코드를 작성하진 않았을 것 같네요.

  3. 1번에서 대략적으로 답변이 되었을 거라 생각합니다. 말씀하신 “컨트롤러, 서비스 , select문” 같은 일련의 작업은은 백단 서버에서 일어나는 일이라 크게 신경쓸 필요 없고 로딩 디스플레이의 문제는 아래와 같은 프로세스만 집중해서 코드를 다시 잘 확인하면 좋을 것 같습니다.

– 우리가 원하는 순서 –

로딩 Display → ajax요청 시작 (init시작) → ajax요청 끝 → 결과 값으로 원하는 작업 실행(테이블을 그리는 등) → 로딩 Hide (init끝)