[javascript] 브라우저 UI 업데이트와 자바스크립트 코드를 동시에 수행할수 있는가

브라우저는 UI 업데이트와 자바스크립트 코드를 동시에 수행하지 못합니다. 자바스크립트를 실행하는 동안에는, 브라우저 화면이 정지된 상태가 됩니다.

자바스크립트 타이머를 이용하면 일정 시간마다 실행을 중단하고 UI 업데이트를 수행해줄 수 있습니다.

http://blog.naver.com/tmondev/220928561593

응답없는 페이지가 되지 않게 하는 법 (feat. setTimeout)

 

var allCount = 100000;
var remainCount = allCount;

var callback = function () {
	alert('complete');
}

function execute() {
	var progressPercent = document.getElementById("progressPercent"),
		percent;
	
	initData();
	
	setTimeout(function() {
		if (remainCount > 0) {
			// for (var i = 0; i < 1000; i++) {
			for (var i = 0; i < 50; i++) {
				searchDeal();
				remainCount = remainCount - 1;
			}
			
			// progress 표시
			percent = (allCount - remainCount) / allCount * 100 + '%';
			progressPercent.style.width = percent;
			
			// 25초 쉬고 execute 메소드 실행
			setTimeout(execute, 25);
		} else {
			callback();
		}
				
	}, 25);
}