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>