Date 객체와 Timing 관련 메소드

Aug 5, 2013

Timing

setTimeout

setTimeout 메소드는 지정된 시간 이후에 함수를 실행한다.

clearTimeout

clearTimeout 메소드는 setTimeout을 시켰을 경우 타이머가 동작하게 되는데 이 타이머를 해제하는 역할을 한다.

setInterval

setTimeout 메소드는 지정된 시간 이후에 단 한 번만 함수를 실행시키는 반면에 setInterval 메소드는 지정된 시간마다 함수를 실행한다.

clearInterval

clearTimeout 메소드는 setInterval 메소드로 타이머를 동작시켰을 때 해제하는 역할을 한다.

Example

HTML

<div id="clock" style="margin-bottom:10px;"></div>
<button id="stopClock">시간아 멈춰라!</button>
  
<hr style="margin:10px 0 10px 0;" />
  
<div id="fivesec" style="display:none;border:1px solid #000;">5초 후에 보여주는 레이어</div>
<button id="dontdisplay">안봐!</button>

Javascript

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
// 5초 후에 5초 레이어 보여주기
var timer1 = setTimeout(function() {
    // 팝업 보여주기
    $("#fivesec").show();
},5000);
  
// 5초 팝업 타이머 해제하는 액션
$("#dontdisplay").click(function() {
    clearTimeout(timer1);
    timer1 = null;
});
  
// ---------------------------
  
// 시계
var timer2 = setInterval(function() {
    // 현재시간 불러와서 변수에 저장
    var d = new Date();
  
    // 현재시간 출력
    $("#clock").html(d.toString());
},1000);
  
// 시간 멈추는 액션
$("#stopClock").click(function() {
    // 타이머 해제
    clearInterval(timer2);
    timer2 = null;
});
</script>

Date 객체

자바스크립트에서는 날짜에 관한 기본적인 것들은 Date 객체가 담당한다. 예를 들면 현재 시간을 가져오거나, 1월 1일이 무슨 요일인지 등을 알 수 있게 돕는 객체다.

참조 URL

아래 링크에서 Date 객체의 모든 것을 확인 할 수 있다.

http://w3schools.com/jsref/jsref_obj_date.asp

Example

Javascript

<script>
// ---- 함수 정의부
  
// 타이머 변수 생성 - 전역
var timer_start = null;
var timer_end = null;
  
// 시작 시각 구하기 함수
function startTimer() {
    timer_start = new Date();
}
  
// 정지 시간 구하기 함수
function stopTimer() {
    timer_end = new Date();
}
  
// 시간 계산하기
function getTimer() {
    var result = timer_end.getTime()-timer_start.getTime();
    console.log(result+"ms");
}
  
// ---- 구현부
startTimer(); // 시작 시각 구하기 함수 실행
for(var i=0;i<100000000;i++) {
    var a = 1;
}
stopTimer(); // 정지 시간 구하기 함수 실행
getTimer(); // 시간 계산해서 콘솔로 출력
</script>