[자바스크립트] 타이머 구현하기

자바스크립트에서는 setTimeout과 setInterval 함수를 사용하여 타이머를 구현할 수 있습니다. 이 두 함수는 모두 지정된 시간 후에 미리 정의된 작업을 실행합니다.

1. setTimeout()

setTimeout 함수는 일정 시간 후에 한 번만 작업을 실행합니다. 아래는 setTimeout 함수의 사용 방법입니다.

 

setTimeout(function() {
  // 실행할 작업
}, 1000); // 1초 후에 실행

위 코드에서 setTimeout 함수는 첫 번째 인수로 콜백 함수를 받습니다. 이 콜백 함수는 지정된 시간이 지난 후에 실행됩니다. 두 번째 인수로는 지연 시간을 밀리초 단위로 받습니다. 위의 예제에서는 1000 밀리초 즉 1초 후에 콜백 함수가 실행됩니다.

setTimeout 함수는 실행된 타이머의 ID를 반환합니다. 이를 이용하여 타이머를 중지할 수 있습니다.

 

var timerId = setTimeout(function() {
  // 실행할 작업
}, 1000); // 1초 후에 실행

// 타이머 중지
clearTimeout(timerId);

위 코드에서 clearTimeout 함수를 사용하여 타이머를 중지할 수 있습니다.

2. setInterval()

setInterval 함수는 일정 시간마다 반복적으로 작업을 실행합니다. 아래는 setInterval 함수의 사용 방법입니다.

 

setInterval(function() {
  // 실행할 작업
}, 1000); // 1초마다 실행

위 코드에서 setInterval 함수는 첫 번째 인수로 콜백 함수를 받습니다. 이 콜백 함수는 지정된 시간마다 반복적으로 실행됩니다. 두 번째 인수로는 실행 간격을 밀리초 단위로 받습니다. 위의 예제에서는 1000 밀리초 즉 1초마다 콜백 함수가 실행됩니다.

setInterval 함수도 setTimeout 함수와 마찬가지로 실행된 타이머의 ID를 반환합니다. 이를 이용하여 타이머를 중지할 수 있습니다.

 

var timerId = setInterval(function() {
  // 실행할 작업
}, 1000); // 1초마다 실행

// 타이머 중지
clearInterval(timerId);

위 코드에서 clearInterval 함수를 사용하여 타이머를 중지할 수 있습니다.

3. 주의사항

setInterval 함수는 일정한 간격으로 작업을 반복하므로, 작업이 오래 걸리는 경우 이전 작업이 완료되기 전에 다음 작업이 실행될 수 있습니다. 따라서 작업이 완료되기 전에 새로운 작업이 시작되지 않도록 주의해 주세요.

또한, setTimeout과 setInterval 함수 모두 정확한 시간 간격으로 작업을 실행하지 않을 수 있습니다. 이는 브라우저나 컴퓨터의 성능에 따라 달라질 수 있습니다. 이러한 경우를 방지하려면, 이전 작업이 완료될 때까지 기다렸다가 다음 작업을 실행하도록 코드를 작성해야 합니다.

마지막으로, setTimeout과 setInterval 함수는 브라우저 환경 뿐만 아니라 Node.js와 같은 서버 사이드 환경에서도 사용할 수 있습니다. 서버 사이드에서는 주로 백그라운드 작업이나 주기적인 작업을 처리할 때 사용됩니다.

이상으로, 자바스크립트에서 타이머를 구현하는 방법을 간단히 설명해 보았습니다. 이를 이용하여 다양한 작업을 처리할 수 있습니다.