명시적으로 UI 렌더링 이후 동작하는 방법

최근 KendoUi의 프로그레스바를 사용하다가 이상한 오류가 생겼는데

 

프로그레스바 호출을 분명 ajax 호출 이전에 선언 했는데도

 

프로그레스바가 나오지 않거나

 

혹은 ajax가 끝난 다음 잠깐 나왔다가, ajax 호출의 complete 부분에 선언해둔 프로그레스바를 없애는 코드에 의해 바로 사라져버리는 문제였다.

 

KendoUi 라이브러리 자체를 못불러오는건가 싶어서 jsp에서 kendoui 라이브러리 가져오는 스크립트 위치도 바꿔보고 했는데

 

그냥 ajax 호출만 제외하면 잘만 나왔다

 

그러다 원인을 찾은게

 

현재 ajax 호출을 비동기로 하고있는데

 

KendoUi를 호출 -> (아직 KendoUi 프로그레스바 호출된 화면이 렌더링 안된 상태) ajax 호출 -> ajax 호출이 비동기라 해당 ajax 호출이 완전히 끝날때까지 다른 작업 진행하지 않음 -> ajax 호출이 끝나면 KendoUi 프로그레스바 화면에 렌더링 -> 바로 ajax의 complete에 선언된 KendoUi 프로그레스바 없애는 코드에 의해 제거됨

 

따라서 그냥 명시적으로 UI 렌더링을 한번 하고 ajax를 호출하는 방식으로 수정했다.

 

수정코드

//KendoUI 호출
kendo.ui.progress($('#대충현재 프로그레스바 띄울 배경 컴포넌트'), true);

new Promise(resolve => {
    requestIdleCallback(resolve);  
}).then(() => {
	$.ajax({
            type: "POST",
            async : false, 			// 동기 통신 !!
            url : url,
            success : function() {
                //성공 시 코드
            },
            error : function() {
                //에러 시 코드
            },
            complete : function() {
                //완료 시 코드
                kendo.ui.progress($('#대충현재 프로그레스바 배경'), false);
            }
	});
});

 

이렇게 하면 안정적으로 프로그레스바가 뜬 이후로 ajax가 실행되었다.