BOM - Browser Object Model

window 객체

from. Modern javascript & jQuery

1. window 객체의 타이머 메서드

DOM 메서드
메서드 설명
setTimeout(function, millisecond) 일정 시간 후에 함수를 한 번 실행.
setInterval(function, millisecond) 일정 시간마다 함수를 반복해서 실행.
clearTimeout(id) 일정 시간후에 함수를 한 번 실행하는 것을 중지시킴.
clearInterval(id) 일정 시간마다 함수를 반복하는 것을 중단시킴.

setTimeout() 메서드는 한 번만 실행하므로 특별히 주의할 사항이 없지만, setInterval() 메서드는 지속적으로 실행되므로 지속적으로 메모리를 차지하게 되기 때문에 주의해야 한다.

타이머가 필요 없을 시에는 타이머를 멈춰야 한다. 타이머를 멈추려면 clearTimeout() 메서드와 clearInterval() 메서드를 사용한다. setTimeout() 메서드와 setInterval() 메서드를 사용하면 타이머 아이디를 리턴하는데, 이 타이머 아이디를 clearTimeout() 메서드와 clearInterval() 메서드의 매개변수에 넣어주면 타이머를 정지할 수 있다.

아래 소스는 10초 동안 화면에 현재 시간을 출력하고 중지한다. 타이머 관련 메서드는 메서드 형태로 사용하기보다는 아래 코드처럼 함수 형태로 많이 사용한다.

예제1 - 타이머 정지 메서드

							// 윈도우가 로드될 때
							window.onload = function  () {
							 alert("3초 후 이 페이지는 종료됩니다.");
							 
							 // 3초 후에 함수를 실행합니다.
							 window.setTimeout(function  () {
								alert("!!!!!!!!!!!");
							 }, 3000);
							};

							window.onload = function  () {
							 // 1초마다 함수를 실행함.
							 var intervalID = setInterval(function  () {
								document.body.innerHTML += '

'+ new Date() +'

' }, 1000); // 10초 후 함수를 실행. setTimeout(function () { // 타이머를 종료. clearInterval(intervalID); }, 10000); };

예제2 - 타이머 정지 메서드

							// script
							var int=self.setInterval("clock()",1000); // setInterval() 메서드는 id값을 반환하는데, 그 값을 int라는 변수에 저장하고 변수 값을 clearInterval()메서드의 인자 값으로 넘긴다.
							function clock()
							{
							var d=new Date();
							var t=d.toLocaleTimeString();
							document.getElementById("clock").value=t;
							}
				
							// html