JavaScript setTimeout()으로 지정한 시간 후에 함수 실행하는 방법

JavaScript에서는 내장 메서드인 setTimeout()을 사용하면 어떤 함수든 원하는 시간만큼 실행을 지연시킬 수 있습니다.

예를 들어 3초 후에 알림(alert) 창을 띄우고 싶다고 가정해 보겠습니다.

먼저 3초를 밀리초(ms) 단위로 변환해야 합니다. 3초는 3000ms이며, 이 값을 사용해 다음과 같이 코드를 작성합니다.

setTimeout(function() {
  alert("3초가 지났습니다!")
}, 3000)

위 예제는 익명(이름 없는) 함수입니다. 하지만 실무에서는 한 번만 사용할 수 있고 코드의 의미도 파악하기 어렵기 때문에 크게 권장되지 않습니다.

다음은 동일한 기능을 기명 함수 표현식(named function expression)으로 작성한 예입니다.

const delayThreeSeconds = function() {
  alert("3초가 지났습니다!")
}

setTimeout(delayThreeSeconds, 3000)

이렇게 작성하면 프로젝트 어디에서든 delayThreeSeconds 변수를 참조해 해당 함수를 재사용할 수 있습니다.

setTimeout의 지연 시간은 '최소 대기 시간'일 뿐, 정확한 값이 아닙니다

많은 개발자들이 놓치는 부분이 있습니다. setTimeout에 지정한 시간은 함수가 실행되기까지 걸리는 최소 지연 시간이지, 정확히 그 시간에 실행된다는 보장이 없다는 점입니다.

따라서 3000ms(3초)를 지정했더라도 함수가 실제로 실행되기까지 훨씬 더 오래 걸릴 수 있습니다. JavaScript는 동기(synchronous) 방식으로 동작하며, 한 번에 하나의 작업만 처리하기 때문입니다.

즉, 웹사이트에 setTimeout보다 먼저 실행되도록 설정된 다른 JavaScript 작업들이 많다면, 그 작업들이 모두 완료된 후에야 지정한 함수가 실행됩니다. 이 과정은 몇 밀리초부터 수 초까지 걸릴 수 있습니다.

특히 큰 지연을 유발하는 대표적인 경우는, 어떤 함수가 외부 소스에서 용량이 큰 스크립트를 불러온 후에야 완료될 수 있을 때입니다. 이런 종류의 함정은 초보 개발자는 물론 경험 많은 개발자도 쉽게 빠질 수 있습니다.

결국 이 모든 특성 때문에 setTimeout은 다소 예측하기 어려우며, 정밀한 타이밍이 필요한 상황에서는 신뢰하기 어렵습니다.

이 문제를 (대체로) 피하는 간단한 방법

프로젝트에서 타이밍 정확성이 중요한 함수가 있다면, 다른 어떤 함수보다 먼저 실행되도록 배치하세요. 최소한 가장 중요한 함수가 최대한 빠르게 실행될 수 있도록 보장할 수 있습니다.

다만 가장 중요한 함수를 다른 코드보다 앞에 두더라도 여전히 어느 정도의 실행 지연은 발생할 수 있습니다.

예를 들어 사용자의 브라우저에 확장 프로그램(addon/extension)이 많이 설치되어 있는 경우입니다. 이러한 소프트웨어 역시 JavaScript 등으로 동작하며, 웹사이트 코드 실행에 얼마나 큰 지연을 일으킬지 예측하는 것은 불가능합니다.

바로 이런 이유로 성능(performance)은 항상 중요하게 다뤄져야 할 주제이며, 일관된 사용자 경험을 제공하려면 모든 브라우저와 다양한 기기에서 코드 성능을 테스트하는 것이 필수적입니다.

알아두면 좋은 정보: 오늘 배운 내용은 setInterval 메서드에도 그대로 적용됩니다. 차이점은 setInterval은 지정한 간격마다 반복 실행되고, setTimeout은 한 번만 실행된다는 것입니다.