#34 자바스크립트에서 타이머(timer) 사용

 

 

타이머(timer) 함수(메소드) 종류 및 사용법

메소드	특징
setTimeout()	setTimeout() 메소드는 지정한 시간이 경과 되면 1회 (호출)실행합니다. 사용법 : setTimeout(호출할함수, 지연시간);
clearTimeout()	setTimeout() 메소드에 의해 함수가 호출되기 전에 실행되어야 (호출)실행을 취소할 수 있습니다. 사용법 : clearTimeout(setTimeout를 변수로 지정한 ID);
setInterval()	setInterval() 메소드는 지정된 시간 간격마다 지정된 함수를 반복적으로 (호출)실행 합니다. 사용법 : setInterval(호출할함수, 지연시간);
clearInterval()	clearInterval() 메소드의 인수로 전달하면, 반복되는 함수의 호출을 취소할 수 있습니다. 사용법 : clearInterval(setInterval를 변수로 지정한 ID);

 

 

예시)

아래 예시에서는 setTimeout()와 clearTimeout()는 setInterval() 및 clearInterval() 와 사용법이 거의 같아

제외 하였습니다. 그리고 setTimeout() 와 setInterval()의 차이점은 1회 실행만 하느냐 반복 실행 하느냐 차이

입니다.

 

<input type="button" id="btn1" value="이거 눌러봐!" onclick="startInterval()">

<input type="button" id="btn2" value="날짜시간 출력정지" onclick="cancelInterval()">

<div id="date"></div>

<script>
var cnt = 3 ;  // 동작 카운트 기본값 선언
var timeId;  // setInterval() 메소드에서 반환될 값이 저장될 변수 선언

// 날짜시간 출력 시작   
function startInterval() {
    timeId = setInterval(Btn_printCurrentDate, 1000); // 날짜 시간을 1초 간격으로 출력
}
 
// 날짜시간 출력전/후 동작처리  
function Btn_printCurrentDate() {     
    
    if (cnt >= 1 && cnt <= 3) {   // 동작 전 1~3초 전 시간 표시     
      document.getElementById("btn1").value = cnt + "초 후 실행됨";  // btn1 id 값을 가진 곳의 버튼 이름을 변경
      cnt = cnt - 1; // 카운터 값 -1 감소
    } 
    else if (cnt == 0){ // 0초 이면 시간 출력
      document.getElementById("btn1").value = "현재시간이 출력됨";  // btn1 id 값을 가진 곳의 버튼 이름을 변경
      printCurrentDate(); // 날짜시간 출력
    } 
}  

// 날짜시간 출력함수    
function printCurrentDate() {    
    document.getElementById("date").innerHTML = new Date(); // date id 값을 가진 곳에 날짜시간 출력
}
  
// 날짜시간표시 멈춤 함수  
function cancelInterval() {
    clearInterval(timeId); // 반복되는 timeId 호출 취소 
    document.getElementById("btn1").value = "이거 눌러봐!";  // btn1 id 값을 가진 곳의 버튼 이름을 변경
    document.getElementById("date").innerHTML = ""; //  date id 값을 가진 곳에 날짜시간 지움
    cnt = 3; // 3초 초기 값 입력 
} 
  
</script> 

 

 

 

결과)

 

실행 전 초기 모습

날짜시간 출력전 남은시간 출력

날짜 시간이 반복 실행되어 출력된 모습