타이머와 메인 스레드 블로킹

let remain = 600;
  
setInterval(() => {
  console.log(--remain);
}, 1000);

setTimeout(() => {
  for (let i = 0; i < 50000000; i++) {
    JSON.parse('{ "test": "test" }');
  }
}, 5000);

5초가 지나면 for 문으로 메인 스레드가 블로킹되어

interval 콜백이 쌓이고 나중에 한번에 실행된다. 어떻게 개선할 수 있을까?

남은 시간을 절대 시간으로 재계산하는 방법이 있다.

현재 시간을 통해 정확히 남은 시간(elapsed) 을 역산한다.

const TOTAL_TIME = 600;
const startTime = Date.now();

const timer = setInterval(() => {
  const elapsed = Math.floor((Date.now() - startTime) / 1000);
  const remain = TOTAL_TIME - elapsed;
  
  console.log(remain);
  
  if (remain <= 0) {
    clearInterval(timer);
  }
}, 1000);

setTimeout(() => {
  for (let i = 0; i < 50000000; i++) {
    JSON.parse('{ "test": "test" }');
  }
}, 5000);

블로킹으로 쌓인 콜백들이 연속 실행되더라도,

각 콜백은 절대 시간 기준으로 정확한 남은 시간을 계산한다.