JavaScript - 타이머

개요

웹브라우저의 Windows 객체에가 제공하는 setTimeout과 setInterval 메서드를 활용하면 지정된 시간 후에 함수를 실행하거나 일정한 시간 간격에 따라 함수를 반복 실행할 수 있습니다.

setTimeout - 지연 시간 후, 함수 실행

setTimeout 메서드를 사용하면 일정 시간이 흐른 후, 함수를 호출(실행) 하도록 할 수 있습니다. 사용예는 다음과 같습니다.

setTimeout(function() {
  console.log(new Data());
}, 3000);

이 코드를 실행하면 3초 후에 현재 날짜가 콘솔에 표시됩니다. setTimeout() 메서드의 첫 번째 입력 파라메터는 ‘실행하고자 하는 함수’, 두 번째 입력 파라메터는 ‘지연시간’ 을 밀리초 단위로 지정합니다.

또한 setTimeout() 이 반환한 값을 clearTimeout() 의 입력 파라메터로 실행하면 함수 실행이 취소됩니다.

var timer = setTimeout(function() {...}, 3000);
...
clearTimeout(timer);	// 시간이 지나지 않았다면 예약실행이 취소됩니다.

setInterval - 주기적으로 함수 실행

setInterval 메서드를 활용하면 일정한 시간 간격으로 반복해서 함수를 실행할 수 있습니다.

setInterval(function() {
  console.log(new Date());
}, 3000);

이 코드를 실행하면 1초마다 날짜가 콘솔에 표시됩니다. setInterval 메서드의 첫 번째 입력파라메터는 ‘실행하고자 하는 함수’, 두 번째 입력파라메터는 '시간 간격’을 밀리초 단위로 지정합니다.

setInterval() 역시 반환한 값을 clearInterval()에 입력 파라메터로 넘기면 동작을 취소(중단)할 수 있습니다.

var time = setInterval(function() {...}, 3000);
...
clearInterval(timer);	// 주기적 실행이 중단됩니다.

참고

setTimeout()과 setInterval()에 입력 파라메터로 JavaScript 코드를 넣을 수도 있습니다.

setInterval("console.log(new Date())", 3000);

코드는 문자열 형식으로 입력값으로 넣어 주어야 하며, JavaScript 내부적으로 eval()에 입력으로 넣어져 실행됩니다.