SetTimeout은 당신이 생각하는 것과 다릅니다

개발자가 JavaScript에서 setTimeout을 처음 접할 때 이는 종종 함수 실행을 지연시키는 간단한 도구처럼 보입니다. 그러나 setTimeout이 JavaScript 런타임 및 이벤트 루프와 상호 작용하는 방식을 이해하면 특히 특정 조건에서 예상치 못한 동작이 나타날 수 있습니다. 그리고 그것은 단지 setTimeout이 아닙니다. setInterval 및 기타 비동기 함수에서도 유사한 복잡성이 발생합니다.

이벤트 루프: 간략한 개요
JavaScript는 단일 스레드이므로 한 번에 하나의 코드만 실행할 수 있습니다. 그럼에도 불구하고 이벤트 루프를 사용하면 JavaScript가 비차단 작업을 수행할 수 있습니다. 타이머, 네트워크 요청, I/O 작업과 같은 작업을 브라우저나 Node.js API로 오프로드하여 이를 달성합니다. 이러한 작업이 완료되면 해당 콜백 함수가 실행을 위해 이벤트 루프에 다시 대기됩니다.

setTimeout 작동 방식
setTimeout을 호출하면 JavaScript 엔진에 지정된 기간 후에 함수를 실행하도록 요청합니다. 이는 이벤트 루프의 대기열에 콜백 함수를 추가하여 수행됩니다. 그러나 지정된 지연은 보장된 실행 시간이 아니라 콜백을 대기열에 추가하기 전에 엔진이 기다려야 하는 최소 시간입니다. 자세한 작동 방법은 다음과 같습니다.

1. 초기 호출: 콜백 함수 및 지연과 함께 setTimeout이 호출되면 JavaScript 엔진이 이를 브라우저나 Node.js에서 제공하는 Web API 환경에 등록합니다.

2. 타이머: Web API는 지정된 지연에 대해 타이머를 시작합니다. 이 기간 동안 기본 호출 스택은 setTimeout 호출을 따르는 모든 동기 코드를 계속 실행합니다.

3. 콜백 대기열: 타이머가 만료되면 Web API는 콜백을 즉시 실행하지 않습니다. 대신 콜백 함수를 이벤트 큐로 이동합니다.

4. 이벤트 루프: 콜 스택과 이벤트 큐를 지속적으로 모니터링하는 이벤트 루프가 작동됩니다. 콜 스택이 비어 있으면, 즉 현재 실행 중인 작업이 없다는 의미입니다. 이벤트 루프는 이벤트 큐에서 첫 번째 함수를 가져와 실행을 위해 콜 스택으로 푸시합니다.

5. 실행: 콜백 함수가 콜 스택의 최상위에 도달하면 최종적으로 실행됩니다.

타이머가 만료될 때 호출 스택이 다른 작업으로 바쁜 경우 콜백 함수가 실행되기 전에 추가 지연이 발생할 수 있다는 점에 유의하는 것이 중요합니다. 이는 이벤트 루프가 이벤트 큐에서 콜백 함수를 처리하기 전에 호출 스택이 지워질 때까지 기다려야 하기 때문입니다.

---

차단 문제
일반적인 오해는 setTimeout이 지정된 정확한 지연 후에 항상 콜백을 실행한다고 가정하는 것입니다. 이벤트 루프가 무한 루프나 장기 실행 계산과 같은 동기 코드에 의해 차단된 경우 이벤트 루프가 해제될 때까지 콜백이 실행되지 않습니다.

다음 시나리오를 고려해보세요.

console.log('Program started at: ' + new Date().toLocaleTimeString());

const programStartTime = Date.now();

function blockExecutionForThirtySeconds() {
  while (true) {
    const currentTime = Date.now();
    if (currentTime - programStartTime > 30000) {
      console.log('Blocking execution completed after 30 seconds...');
      return true;
    }
  }
}

console.log('Setting setTimeout for 1 second.');
setTimeout(() => {
  console.log('setTimeout executed after 30 seconds instead of 1 second: ' + new Date().toLocaleTimeString());
}, 1000);

blockExecutionForThirtySeconds();

이 예에서 blockExecutionForThirtySeconds 함수는 30초 동안 실행되는 무한 루프를 사용하여 이벤트 루프를 차단합니다. setTimeout이 1초 후에 실행되도록 설정되어 있어도 blockExecutionForThirtySeconds가 완료된 후, 즉 30초 후에만 실행됩니다.

실제 영향
특히 시간 제한, 간격 또는 비동기 처리와 관련된 코드를 작성할 때 개발자에게는 이 동작을 이해하는 것이 중요합니다. setTimeout의 작동 방식을 잘못 이해하면 추적하기 어려운 성능 문제와 버그가 발생할 수 있습니다. 코드 조각이 과도한 계산이나 장기 실행 작업을 수행하고 이벤트 루프를 차단하는 경우 이벤트 루프가 해제될 때까지 모든 setTimeout 콜백, 약속 해결 및 기타 비동기 작업이 지연됩니다.

결론
setTimeout은 코드 실행을 지연시키는 JavaScript의 강력한 도구이지만 그 미묘한 차이를 이해하는 것이 중요합니다. 지정된 지연은 함수가 실행을 위해 대기열에 추가될 때까지 기다려야 하는 최소 시간입니다. 실제 실행 시간은 이벤트 루프의 상태에 따라 달라집니다. 비동기 작업과 이벤트 루프 관리를 익히는 것은 효율적이고 반응이 빠른 JavaScript 애플리케이션을 작성하는 데 핵심입니다.

위 내용은 SetTimeout은 당신이 생각하는 것과 다릅니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!