[JavaScript] Timer
🍁Timer
타이머 시작
1. id setTimeout(할 일, 시간)
1회성 타이머
2. id setInterval(할 일, 시간)
반복 타이머
타이머 종료
1. void clearTimeout(id)
2. void clearInterval(id)
🍁타이머의 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form name="form1">
<fieldset>
<legend>setTimeout</legend>
<input type="button" name="btn1" value="버튼">
<input type="text" name="txt1">
</fieldset>
<fieldset>
<legend>setInterval</legend>
<input type="button" name="btn2" value="버튼">
<input type="text" name="txt2">
</fieldset>
<fieldset>
<legend>조작</legend>
<input type="button" name="btn3" value="시작">
<input type="button" name="btn4" value="멈춤">
<input type="text" name="txt3">
</fieldset>
</form>
<script>
var btn1 = document.form1.btn1;
var btn2 = document.form1.btn2;
var btn3 = document.form1.btn3;
var btn4 = document.form1.btn4;
var txt1 = document.form1.txt1;
var txt2 = document.form1.txt2;
var txt3 = document.form1.txt3;
var txt4 = document.form1.txt4;
btn1.onclick = m1;
function m1() { // 버튼 클릭 < 즉시 호출
setTimeout(f1, 3000);
}
function f1() { // m1 호출 > 3초 후 > f1 호출
// alert('따르릉');
txt1.value = (new Date()).toLocaleTimeString();
}
btn2.onclick = m2;
function m2() {
setInterval(f2, 3000);
}
function f2() {
// alert('따르릉');
txt2.value = (new Date()).toLocaleTimeString();
}
var n = 1;
var timer = 0;
btn3.onclick = m3;
function m3() {
timer = setInterval(f3, 10);
console.log(timer);
}
function f3() {
txt3.value = n;
n++;
}
btn4.onclick = m4;
function m4() {
clearInterval(timer); //타이머 종료
}
</script>
</body>
</html>
타이머 주의사항
함수를 실행할 때마다 별도의 타이머가 실행되며 멈춤 버튼이 실행되지 않는다.
타이머를 호출하는 코드를 여러 번 반복하면 이전에 시작한 타이머를 조작할 방법이 없으므로 통제할 수 있도록 해야 한다.
타이머를 단 한 개만 실행하도록 하여 문제를 해결할 수 있다.
🍁타이머의 활용
🍂타이머 중복 실행 금지
var n = 1;
var timer = 0;
btn3.onclick = m3;
function m3() {
if (timer == 0) { // 타이머 조건부 실행
timer = setInterval(f3, 10);
console.log(timer);
}
}
function f3() {
txt3.value = n;
n++;
}
btn4.onclick = m4;
function m4() {
clearInterval(timer); //타이머 종료
timer = 0; // 타이머 초기화
}timer가 0이라는 말은 실행 중인 타이머가 없다는 의미이다.
조건부로 타이머를 실행하게 하면 타이머가 중복으로 실행되지 않으므로 안정적으로 사용할 수 있다.
멈추고 난 뒤에 다시 시작버튼을 누르게 하고 싶으면 멈춤 버튼을 눌렀을 때 timer 변수를 다시 0으로 초기화하게 하면 된다.
타이머 여러 개 실행
var n = 1;
var timer = 0;
var timerlist = [];
btn3.onclick = m3;
function m3() {
timer = setInterval(f3, 10);
timerlist.push(timer);
}
function f3() {
txt3.value = n;
n++;
}
btn4.onclick = m4;
function m4() {
//순차 중지
timer = timerlist.pop();
clearInterval(timer);
//일괄 중지
for (var i=0; i<timerlist.length; i++){
clearInterval(timerlist[i]);
}
}
배열을 사용하여 타이머를 여러 개 구현할 수 있다.
방 번호로 사용할 수 있는 변수가 없으므로 stack처럼 사용할 수 있는 push 함수를 사용한다.
여러 개의 타이머를 동시에 실행하므로 그만큼 f3 함수를 호출하여 n이 증가하는 속도가 빨라지게 된다.
멈춤 버튼을 눌렀을 때 pop 함수로 타이머 리스트에서 하나씩 꺼내 순차적으로 종료한다.
일괄 중지를 하고 싶다면 for문을 사용하면 된다.
이미지에 타이머 적용 (이미지 슬라이더)
<img src = "../asset/images/dog01.jpg" name = "dog1">
<script>
var dog1 = document.images['dog1'];
var m = 1;
var dtimer = 0;
dog1.onclick = m1;
function m1() {
if (dtimer == 0) {
dtimer = setInterval(f1, 1000);
} else {
clearInterval(dtimer);
dtimer = 0; // 중지
}
}
function f1() {
m++;
if (m > 5) m = 1;
dog1.src = '../asset/images/dog0' + m + '.jpg';
}
</script>
1초가 경과하면 다음 이미지를 보여주는 이미지 슬라이더를 만들었다.
중복으로 실행되지 않도록 하고, 슬라이더 실행 버튼과 중지 버튼을 구분하지 않으므로 토글 버튼을 사용하도록 한다.
이를 이용해 룰렛과 같은 간단한 게임을 만들 수 있다.
