[공부용]참고 사이트 모음/[자바스크립트]

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

bled 2021. 5. 18. 17:24

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

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

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

 

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

들어가며웹 개발자라면 자바스크립트를 많이 사용하게 됩니다. 웹이 발전하면서, 예전에는 수십줄이면 충분...

blog.naver.com

 

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);
}