타이머

JavaScript에서 타이머 기능은 시간 지연(delay)이나 반복 실행을 위해 주로 사용됩니다. 이 기능은 setTimeout, setInterval, 그리고 이들의 취소를 위한 clearTimeout, clearInterval 메서드를 통해 구현할 수 있습니다.

setTimeout

setTimeout 함수는 지정된 시간(밀리초)이 지난 후에 함수를 한 번 실행합니다. 이 메서드는 두 개의 인자를 받습니다: 실행할 함수와 지연 시간(밀리초 단위).

function sayHello() {
  console.log("Hello!");
}

// 2000밀리초(2초) 후에 sayHello 함수 실행
let timerId = setTimeout(sayHello, 2000);

만약 지정된 타이머를 취소하고 싶다면, clearTimeout 메서드를 사용할 수 있습니다. **clearTimeout**은 **setTimeout**에서 반환된 타이머 식별자를 인자로 받습니다.

clearTimeout(timerId);

setInterval

setInterval 함수는 지정된 시간 간격마다 함수를 반복 실행합니다. 이 메서드 역시 **setTimeout**과 유사하게 두 개의 인자를 받습니다: 실행할 함수와 시간 간격(밀리초 단위).

function sayHelloRepeatedly() {
  console.log("Hello again!");
}

// 매 2000밀리초(2초)마다 sayHelloRepeatedly 함수 반복 실행
let intervalId = setInterval(sayHelloRepeatedly, 2000);

**setInterval**로 생성된 타이머를 중지하려면, clearInterval 메서드를 사용합니다. 이 메서드는 **setInterval**에서 반환된 타이머 식별자를 인자로 받습니다.

clearInterval(intervalId);

타이머 사용 시 주의사항

• 타이머 함수(setTimeout, setInterval) 내에서 **this**의 컨텍스트는 전역 객체(브라우저에서는 window, Node.js에서는 global)를 가리키므로, 클래스 메서드나 객체 메서드를 타이머 함수로 전달할 때는 컨텍스트를 유지하는 방법(예: 화살표 함수 사용, Function.prototype.bind 메서드 사용)을 고려해야 합니다.
• 타이머의 지연 시간은 정확한 실행 시간을 보장하지 않습니다. 브라우저/환경의 태스크 스케줄링이나 성능 제약으로 인해 실제 실행 시간이 지연될 수 있습니다.
• 많은 수의 타이머를 사용하거나, 너무 짧은 간격으로 **setInterval**을 설정하는 것은 웹 페이지의 성능에 부정적인 영향을 줄 수 있으므로 주의가 필요합니다.