Event Loop Task Scheduling Usecase

1. CPU 소모가 많은 태스크는 쪼개기

• 태스크를 여러 조각으로 쪼개자.
• 예를들어 부분적인 작업은 setTimeout 지연시간 0으로 사용해 스케쥴링하도록
• setTiemout 을 사용하여 작업을 스케쥴링 할 때, 만약 for 문을 1000개 돌린다면 앞의 500개를 setTimeout 으로 스케쥴링하는게 좋을까, 뒤의 500개를 스케쥴링하는게 좋을까?
  • 정답은 앞의 500개! 왜냐하면 앞에 setTimeout으로 스케쥴링을 하면, for 문을 돌리는 동안 타이머를 실행할 수 있으므로 조금이라도 지연시간이 단축됨!

2. Progress bar

• 프로그래스 바와 같이 진척 상태를 보여주는 인디케이터 UI를 만들어야하는경우.
• setTimeout 를 사용하여 태스크를 여러개로 쪼개면, 서브 태스크 중간마다 상태 변화를 볼 수 있음!

let i = 0;

function count(){
	do{
	   i++;
	   progress.innerHTML = i;
	} while( i % 1e3 !== 0){
	   setTimeout(count);
	}
}

count();

• 이렇게 현재 걸리고 있는 진척상황을 볼 수 있다!

3. 이벤트 처리가 끝난 후에 작업하기

• 이벤트 핸들러를 만들 때, 이벤트 버블링이 끝나고 모든 DOM 트리 레벨에서 이벤트가 핸들링 될 때까지, 특정 액션을 미뤄야할 때가 있음.
• 이 때 연기시킬 액션 코드를 지연시간이 0인 setTimeout으로 감싸면 원하는 동작 구현 가능!

menu.onClick = function(){
	let customEvent = new CustomEvent("menu-open",{bubbles:true});

setTimeout(()=> menu.dispatchEvent(customEvent));
}