[Javascript] 자바스크립트 브라우저 객체 모델 - 타이머

브라우저 객체 모델(BOM)이란?

• 자바스크립트를 이용하면 브라우저의 정보에 접근하거나 제어할 수 있는데, 이때 사용할 수 있는 객체 모델이 바로 브라우저 객체 모델(BOM, Browser Object Model)이다.
• 브라우저 객체 모델(BOM)은 문서 객체 모델(DOM)과는 달리 W3C의 표준 객체 모델은 아니지만, 자바스크립트에서는 이러한 BOM 모델의 객체들을 전역 객체(global object)로 사용할 수 있다.

 

타이머(timer)

• window 객체는 일정 시간이 지난 뒤에 함수를 호출할 수 있고, 또한 이렇게 설정된 함수의 호출을 취소할 수 있다.

setTimeout() 메소드

• setTimeout() 메소드는 명시된 시간이 지난 뒤에 지정된 함수를 호출하며, 이 메소드가 성공적으로 호출되면 설정된 timeoutID를 반환한다.
• 이 메소드는 밀리초(milliseconds) 단위로 지연 시간을 설정할 수 있다.

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

function startTimeout() {
    setTimeout(printCurrentDate, 2000);
}

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

setInterval() 메소드

• setInterval() 메소드는 지정된 시간 간격마다 지정된 함수를 반복적으로 호출하는데, 성공적으로 호출되면 설정된 timeoutID를 반환한다.
• 이 메소드는 밀리초(milliseconds) 단위로 시간 간격을 설정할 수 있다.

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

function startInterval() {
    setInterval(printCurrentDate, 2000);
}

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

clearTimeout() 메소드

• setTimeout() 메소드의 반환값을 clearTimeout() 메소드의 인수로 전달하면 계획된 함수의 호출을 취소할 수 있다.
• setTimeout() 메소드에 의해 함수가 호출되기 전에 실행되어야 호출을 취소할 수 있으며, 함수가 호출된 이후에 이 메소드를 호출하면 아무런 동작도 하지 않는다.

window.clearTimeout(timeoutID);

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>";
}

 

Reference

• http://www.tcpschool.com/
• https://poiemaweb.com/