[javascript] 동기 Ajax 로딩바_ ajax synchronous progressbar

[javascript] 동기 Ajax 프로그래스바_ loading bar for sync ajax

[javascript] 동기 Ajax loading bar_ progress bar for sync ajax

 

Ajax에서 async 즉, 동기/비동기를 적용하는 옵션이 있다.

async를 true로 주면 비동기, false를 주면 동기로 작동한다.

 

ajax에서 async를 false로 적용하게되면, ajax가 완벽하게 실행하는동안 자바스크립트 동작이 안되기 때문에 적용해두었던 로딩바 또는 프로그레스바가 작동하지 않게된다.

 

 

■ 해결방법

 

$('#loading').show();
let param = {'test': 'value'};

setTimeout(function() {
    $.ajax({
        url : 'URL',
        type : 'POST',
        data : JSON.stringify(param),
        async: false,
        success : function(data) {
			$('#loading').hide();
        },
        error : function() {
        	$('#loading').hide();
                alert('ERROR');
        }
    });
}, 0); // End setTimeout(function()

 

 

로딩바 show()

setTimeout(function() {

         ajax 작성( async : false )

         로딩바 hide()

}, 0);

 

->  setTimeout(function() { }, 0); 으로 동기 ajax를 감싸주면 처리된다.