JavaScript 타이머 알아보기

setTimeout()

JavaScript 코드를 작성할 때, 함수의 실행을 지연시키고 싶을 수 있습니다.

이것이 setTimeout의 역할입니다. 나중에 실행할 콜백 함수와, 얼마나 나중에 실행할지 밀리초 단위로 표현하는 값을 지정합니다:

setTimeout(() => {
  // 2초 후 실행
}, 2000)
setTimeout(() => {
  // 50밀리초 후 실행
}, 50)

이 구문은 새로운 함수를 정의합니다. 그 안에 원하는 다른 함수를 호출하거나, 기존 함수 이름과 매개변수 집합을 전달할 수 있습니다:

const myFunction = (firstParam, secondParam) => {
  // 뭔가 처리
}
// 2초 후 실행
setTimeout(myFunction, 2000, firstParam, secondParam)

setTimeout은 타이머 ID를 반환합니다. 일반적으로 사용되지는 않지만, 이 ID를 저장하고 이 예약된 함수 실행을 삭제하고 싶다면 지울 수 있습니다:

const id = setTimeout(() => {
  // 2초 후 실행되어야 함
}, 2000)
// 마음이 바뀌었음
clearTimeout(id)

제로 딜레이

타임아웃 딜레이를 0으로 지정하면, 콜백 함수는 가능한 한 빨리, 하지만 현재 함수 실행 이후에 실행됩니다:

setTimeout(() => {
  console.log('after ')
}, 0)
console.log(' before ')

이 코드는 다음을 출력합니다.

before
after

이는 특히 CPU에서 많은 작업을 수행하는 것을 피하고 스케줄러에 함수를 대기시켜 무거운 계산을 수행하는 동안 다른 함수를 실행할 수 있도록 하는 데 유용합니다.

TIP

일부 브라우저(IE 및 Edge)는 이와 똑같은 기능을 수행하는 setImmediate() 메서드를 구현하지만, 표준이 아니며 다른 브라우저에서는 사용할 수 없습니다. 하지만 Node.js에서는 표준 함수입니다.

setInterval()

setInterval은 setTimeout과 유사한 함수이지만, 차이점이 있습니다. 콜백 함수를 한 번 실행하는 대신, 지정한 특정 시간 간격(밀리초 단위)으로 영원히 실행합니다:

setInterval(() => {
  // 2초마다 실행
}, 2000)

위의 함수는 clearInterval을 사용하여 중지하라고 말하지 않는 한 2초마다 실행되며, setInterval이 반환한 간격 ID를 전달합니다:

const id = setInterval(() => {
  // 2초마다 실행
}, 2000)
// 마음이 바뀌었음
clearInterval(id)

setInterval 콜백 함수 내에서 clearInterval을 호출하여 다시 실행해야 하는지 또는 중지해야 하는지 자동으로 결정하도록 하는 것이 일반적입니다. 예를 들어, 다음 코드는 App.somethingIWait 값이 arrived가 될 때까지 무언가를 실행합니다.

재귀적인 setTimeout

setInterval은 함수의 실행 완료 시점을 고려하지 않고 n 밀리초마다 함수를 시작합니다.

만약 함수가 항상 같은 시간이 걸린다면 괜찮습니다.

하지만 네트워크 상태에 따라 함수의 실행 시간이 달라질 수 있습니다.

그리고 하나의 긴 실행이 다음 실행과 겹칠 수도 있습니다.

이를 방지하기 위해 콜백 함수가 완료될 때 재귀적으로 호출되는 setTimeout을 예약할 수 있습니다.

const myFunction = () => {
  // 뭔가 하기
  setTimeout(myFunction, 1000)
}
setTimeout(myFunction, 1000)

setTimeout과 setInterval은 타이머 모듈을 통해 Node.js에서 사용할 수 있습니다.

Node.js는 또한 setImmediate()를 제공하며, 이는 setTimeout(() => {}, 0)을 사용하는 것과 동일하며, 주로 Node.js 이벤트 루프와 함께 사용됩니다.