Timing Event 개념
타이밍 이벤트 : window 객체가 지정된 시간 간격에 코드 실행 가능한데, 이 시간 간격 의미.
1.
대표적인 JS 타이밍 이벤트 메서드 2개.
setTimeout(function, milliseconds)
지정된 밀리 초 동안 기다렸다가 함수 실행.
setInterval(function, milliseconds)
setTimeout ()과 동일하지만, 함수 실행을 계속 반복.
2.
위 2 메서드 모두 window 객체의 메서드임.
1-1. setTimeout() 메서드 - 일정시간 후 함수 실행
window.setTimeout(function, milliseconds);
※ window.setTimeout() 메서드는 window 접두사없이 사용 가능.
[매개변수]
function
필수. 실행할 함수.
milliseconds
선택. 밀리초 (1초 : 1000)
<button onclick="setTimeout(homzzang, 3000);">클릭</button>
<script>
function homzzang() {
alert('홈짱닷컴 Homzzang.com');
}
</script>
결과보기
1-2. clearTimeout() 메서드 - setTimeout() 실행중지
hzVar = setTimeout(function, milliseconds);
clearTimeout(hzVar);
1.
clearTimeout() 메서드는 setTimeout()에 지정된 함수의 실행을 중지시킴.
2.
window.clearTimeout() 메서드는 window 접두사없이 사용 가능.
3.
clearTimeout() 메서드의 매개변수 : setTimeout() 메서드 반환 결과가 담긴 변수를 매개변수로 사용.
4.
함수가 아직 실행되지 않은 경우, clearTimeout() 메서드 호출해 실행 중지 가능.
※ 실행 버튼 클릭 후 3초 전에 중지 버튼 클릭 시 함수 실행 막을 수 있음.
<button onclick="hzVar = setTimeout(homzzang, 3000)">실행</button>
<button onclick="clearTimeout(hzVar)">중지</button>
<script>
function homzzang() {
alert("홈짱닷컴 Homzzang.com");
}
</script>
결과보기
2-1. setInterval() 메서드 - 일정시간마다 함수 실행
window.setInterval(function, milliseconds);
[매개변수]
function
실행할 함수
milliseconds
각 실행 사이의 시간 간격을 나타내는 밀리초. (1초 = 1000 밀리초)
1.
setInterval() 메서드는 주어진 시간 간격마다 주어진 함수를 반복 실행.
2.
window.setInterval() 메서드는 window 접두사 없이 사용 가능.
※ 매초마다 "hzTimer" 함수 (예 : 디지털 시계) 실행.
<p id="demo"></p>
<script>
var myVar = setInterval(hzTimer, 1000);
function hzTimer() {
var d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>
결과보기 (예) 오전 2:07:18
2-2. clearInterval() 메서드 - setInterval() 실행중지
hzVar = setInterval(function, milliseconds);
window.clearInterval(hzVar);
1.
clearInterval() 메서드는 setInterval() 메서드 지정된 함수의 실행을 중지시킴.
2.
window.clearInterval() 메서드는 window 접두사 없이 사용 가능.
3.
clearInterval() 메서드의 매개변수는 setInterval() 메서드의 반환 결과가 담긴 변수.
<p id="demo"></p>
<button onclick="clearInterval(hzVar)">중지</button>
<script>
var hzVar = setInterval(hzTimer ,1000);
function hzTimer() {
var d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>
결과보기
2초마다 시간 표시
<button onclick="timedText()">클릭</button>
<p id="demo">홈짱닷컴 Homzzang.com</p>
<script>
function timedText() {
setTimeout(hzTimeout1, 2000)
setTimeout(hzTimeout2, 4000)
setTimeout(hzTimeout3, 6000)
}
function hzTimeout1() {
document.getElementById("demo").innerHTML = "2 초";
}
function hzTimeout2() {
document.getElementById("demo").innerHTML = "4 초";
}
function hzTimeout3() {
document.getElementById("demo").innerHTML = "6 초";
}
</script>
결과보기
디지털시계 (예제: 01:41:55)
<script>
function hzTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
h = checkTime(h);
m = checkTime(m);
s = checkTime(s);
document.getElementById('hz').innerHTML = h + ":" + m + ":" + s;
var t = setTimeout(hzTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // 10 보다 작은 수 앞에 0 추가.
return i;
}
</script>
<body onload="hzTime()">
<div id="hz"></div>
결과보기 (예) 01:41:55
