타이머

타이머(timer)

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

1. setTimeout()

2. setInterval()

 

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

3. clearTimeout()

4. clearInterval()

---

setTimeout() 메소드

명시된 시간이 지난 뒤에 지정된 함수를 호출

문법

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

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

이 메소드는 밀리초(milliseconds) 단위로 지연 시간을 설정할 수 있음

 

예제

function startTimeout() {
    setTimeout(printCurrentDate, 2000);
}
function printCurrentDate() {
    document.getElementById("date").innerHTML = new Date();
}

코딩연습 ▶

---

setInterval() 메소드

지정된 시간 간격마다 지정된 함수를 반복적으로 호출

문법

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

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

이 메소드는 밀리초(milliseconds) 단위로 시간 간격을 설정할 수 있음

 

예제

function startInterval() {
    setInterval(printCurrentDate, 2000);
}
function printCurrentDate() {
    document.getElementById("date").innerHTML += new Date() + "<br>";
}

코딩연습 ▶

---

clearTimeout() 메소드

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

문법

window.clearTimeout(timeoutID);

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

함수가 호출된 이후에 이 메소드를 호출하면 아무런 동작도 하지 않음

예제

var timeoutId;
function startTimeout() {
    timeoutId = setTimeout(printCurrentDate, 2000);
}
function cancelTimeout() {
    clearTimeout(timeoutId);
}
function printCurrentDate() {
    document.getElementById("date").innerHTML += new Date() + "<br>";
}

코딩연습 ▶

---

clearInterval() 메소드

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

문법

window.clearInterval(timeoutID);

 

예제

var timeoutId;
function startInterval() {
    timeoutId = setInterval(printCurrentDate, 2000);
}
function cancelInterval() {
    clearInterval(timeoutId);
}
function printCurrentDate() {
    document.getElementById("date").innerHTML += new Date() + "<br>";
}

코딩연습 ▶

---

참고

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

코딩교육 티씨피스쿨