복습 - setInterval

- HTML -

<input type="text" id="txt_temp" value="1">
<button onclick="start()">시작</button>
<button onclick="end()">종료</button>

 

- JAVASCRIPT -

var t = null;
var num = 1;

function increment() {
    // txt_temp.value = (txt_temp.value*1) + 1;
    document.getElementById("txt_temp").value = num++;
}

function start() {
    if(t == null) {
        t = setInterval(increment, 1000);        
    } else {

    }
}

function end() {
    clearInterval(t);
}

 

설명

• 버튼을 누르면 인풋창에 인터벌로 인하여 1초(1000)마다 1씩 증가한다.
• txt_temp.value = "txt_temp" + 1 로 작성하면 1씩 증가가 아니고
• 111111111 처럼 문자열로 나온다.
• 그래서 주석문 처럼 (txt_temp.value * 1) + 1  곱하기 1을 해주거나
• 작성된것처럼 dom으로 num++ 해준다.
• 버튼을 누르면 인터벌이 시작되는데 연타를 하면 쌓이면서 빠르게 증가해버린다.
• 이를 방지하기 위해 if 문으로 t == null 값이 참이면 increment, 1000을 실행되게 한다.