[TCP School/자바스크립트] 브라우저 객체 모델(BOM) - 타이머

window 객체는 일정 시간이 지난 뒤에 함수를 호출할 수 있도록 다음 메소드를 제공한다.

 

1. setTimeout()

2. setInterval()

 

또한, 이렇게 설정된 함수의 호출을 취소할 수 있도록 다음 메소드를 제공한다.

 

1. clearTimeout()

2. clearInterval()

---

setTimeout()

setTimeout() 메소드는 명시된 시간이 지난 뒤에 지정된 함수를 호출한다.

window.setTimeout(호출할함수, 지연시간);

이 메소드가 성공적으로 호출되면, 설정된 timeoutID를 반환한다.

이 메소드는 밀리초 단위로 지연 시간을 설정할 수 있다.

 

<button id="button" onclick="startTimeout()">1초 후에 색 바뀜</button>

<script>
    function startTimeout() {
        setTimeout(setColor, 1000);
    }

    function setColor() {
        var button = document.getElementById('button');
        button.style.color = 'red';
    }
</script>

---

setInterval()

setInterval() 메소드는 지정된 시간 간격마다 지정된 함수를 호출한다.

window.setInterval(호출할함수, 지연시간);

setTimeout() 메소드와 동일하게 설정된 timeoutID를 반환한다.

밀리초 단위로 지연시간을 지정한다.

 

<button onclick="startTimeout()" style="width: 190px; border: 1px solid black;">2초 뒤에 현재 시간을 표시</button>
<p id='date'></p>

<script>
    function startTime() {
        setInterval(printCurrentDate, 2000);
    }
    
    function printCurrentDate() {
        document.getElementById('date').innerHTML = new Date();
    }
</script>

---

clearTimeout()

setTimeout() 메소드의 반환값을 clearTimeout()의 인수로 전달하면, 계획된 함수의 호출을 취소할 수 있다.

 

이 메소드는 setTimeout() 메소드에 의해 함수가 호출되기 전에 실행되어야 호출을 취소할 수 있다.

함수가 호출된 뒤에 이 메소드를 호출하면 아무런 동작을 하지 않는다.

 

<button id="button" onclick="startTimeout()" style="width: 190px; border: 1px solid black;">1초 후에 색 바뀜</button>
<button onclick="cancleTimeout()" style="width: 190px; border: 1px solid black;">색 변경 취소</button>

<script>
     var timeoutId;
     function startTimeout() {
          timeoutId = setTimeout(setColor, 1000);
     }
     
     function cancleTimeout() {
          clearTimeout(timeoutId);
     }
     
     function setColor() {
         var button = document.getElementById('button');
         button.style.color = 'red';
     }
</script>

---

clearInterval()

setInterval() 메소드의 반환값을 clearInterval() 메소드의 인수로 전달하면, 반복되는 함수의 호출을 취소할 수 있다.

 

<button onclick="startTimeout()" style="width: 190px; border: 1px solid black;">2초 뒤에 현재 시간을 표시</button>
<button onclick="cancleTimeout()" style="width: 190px; border: 1px solid black;">갱신 중지</button>
<p id='date'></p>

<script>
    var timeoutId;
    function startTimeout() {
        timeoutId = setInterval(printCurrentDate, 2000);
    }
    
    function cancleTimeout() {
        clearInterval(timeoutId);
    }
    
    function printCurrentDate() {
        document.getElementById('date').innerHTML = new Date();
    }
</script>

---

TCP School의 강의 내용을 정리한 포스트입니다.

http://www.tcpschool.com/javascript/intro

코딩교육 티씨피스쿨