전 장에서 AJAX 를 공부하면서 우리는 [불러오기] 버튼을 클릭하면 그때 서버에서 최신글을 가져 오는 예제를 공부해 보았어.
그런데 포털들을 보면 클릭없이 가만히 있는데도 최신글이나 검색어등이 일정한 시간 간격으로 변경되는 것을 볼 수 있어.
이것은 시간 지연 관련 일을 처리하는 setTimeout 과 setInterval 이라는 함수들이 하는 일이야.
■ setTimeout
setTimeout 은 지정한 시간이 지나면 그때 어떤 작동을 한 번만 실행하라는 명령(메소드)이야.
문법은 다음과 같아.
setTimeout(실행할 함수, 기다릴 시간(1초=1000))
이것 역시 코드를 먼저 보는에 이해가 제일 빨라
1. 아래 내용을 복사해서 js.html 을 바꿔치고 저장해서, 실행해 봐.
<!DOCTYPE html>
<html>
<body>
<h1></h1>
<h2>setTimeout 공부</h2>
<p>폭파를 막으려면 5초 이내에 버튼을 누르세요.</p>
<button onclick="myStop()">중지!</button>
<h2 id="demo"></h2>
<script>
let myTime = setTimeout(blow, 5000);
function blow() {
document.getElementById("demo").innerHTML = "꽝~~!"
}
function myStop() {
clearTimeout(myTime);
}
</script>
</body>
</html>
위 파일을 실행하면 페이지가 나타나고 5초 후에
꽝~ 메시지가 나올거야.
그런데 이 "꽝~" 메시지가 나오기 전에 [중지] 버튼을 누르면 메시지는 나오지 않아.
<script>의 첫줄 부터 분석해 보자구.
let myTime = setTimeout(blow, 5000)
이 라인은 함수(function) 안에 있는 내용이 아니기 때문에 스크립트를 읽으면 바로 실행돼.
그런데 명령이 setTimeout(blow, 5000) 이니 5초 뒤에 blow() 라는 함수를 실행하라는 뜻이야.
이 줄은 앞에 변수객체에 할당하지 않고 그냥 아래와 같이 적어 주어도 돼.
setTimeout(blow, 5000) ;
앞에 객체에 할당한 것은 아래 쪽 함수에서 써먹기 위한거야.
[중지] 버튼을 누르면 myStop() 라는 함수를 실행하도록 했는데, clearTimeout(myTime) 이야.
이 clearTimeout 은 이전에 실행한 setTimeout을 취소시키는 명령이야.
그러므로 [중지] 버튼을 누르면 setTimeout 에서 지정한 함수나 명령은 취소 돼.
물론 이미 setTimeout 에서 지정한 시간이 지나 함수나 명령이 실행된 뒤에는 clearTimeout 을 해도 아무 소용이 없어.
setTimeout 을 이용한 예제를 하나 더 볼까?
2. 아래 내용을 복사해서 js.html 을 바꿔치고 저장해서, 실행해 봐.
<!DOCTYPE html>
<html>
<body>
<h1>팝업창 자동 닫기</h1>
<p>3초 뒤에 창은 자동으로 파괴됩니다.(미션 임파서블)</p>
<button onclick="openWin()">창열기</button>
<script>
function openWin() {
let myWin = window.open("", "", "width=500, height=500");
setTimeout(function() {myWin.close()}, 3000);
}
</script>
</body>
</html>
이 코드는 사용자가 [창열기] 버튼을 클릭하면 빈 브라우저창을 하나 열었다가 3초 뒤에 자동으로 닫는 예제야.
[창열기]를 클릭하면 openWin() 함수가 실행되고, 이 함수에서는 window.open 이라는 메소드로 가로500, 세로 500px 짜리 창을 열고, 다시 setTimeout 메소드로 3초뒤에 close() 메소드로 창을 닫는거야.
이때 여기서는 setTimeout() 안에 함수이름을 지정하지 않고 바로 함수내용을 입력했어.
간단한 작업은 별도 함수를 만들지 않도 이렇게 해도 된다는 얘기지.
■ setInerval
setTimeout 은 지정한 시간 뒤에 지정한 함수내용을 단 1번만 실행해.
그런데 한 번 실행되면 지정한 시간 마다 계속 반복 되는 코드가 필요할 때가 있어.
대표적인 예가 슬라이드쇼야.
메인화면에서 몇 초 마다 그림들이 휙휙 바뀌는 화면 많이 봤지? 또 1분 마다 최신뉴스나 주가등이 바뀌는 것도 모두 이 setInterval 을 사용한 것들이야.
사용방법은 setTimeout 과 이름만 다르고 거의 비슷해. setTimeout 에서 했던 내용을 setInterval 로 변경해 볼까?
1. 아래 내용을 복사해서 js.html 을 바꿔치고 저장해서, 실행해 봐.
<!DOCTYPE html>
<html>
<body>
<h1></h1>
<h2>setTimeout 공부</h2>
<p>더 이상의 폭파를 막으려면 버튼을 누르세요.</p>
<button onclick="myStop()">중지!</button>
<h2 id="demo"></h2>
<script>
let myTime = setInterval(blow, 2000);
function blow() {
document.getElementById("demo").innerHTML += "꽝~"
}
function myStop() {
clearInterval(myTime);
}
</script>
</body>
</html>
이번 코드는 사용자가 [중지] 버튼을 누르기 전까지는 계속 "꽝~꽝~꽝~..." 이 늘어날거야.
(blow 함수에서 ...innerHTML += "꽝~" 으로 += 기호를 썻기 때문에 실행될 때 마다 전에 있던 문자열 뒤에 '꽝~'이 추가될거야)
[중지] 버튼을 클릭하면 clearInterval 이 실행되서 반복 작업이 중지 될거야.
여기서도 대표적으로 많이 쓰이는 간단한 예제를 하나 더 볼까?
화면상에 시간을 표시하는 코드야
2. 아래 내용을 복사해서 js.html 을 바꿔치고 저장해서, 실행해 봐.
<!DOCTYPE html>
<html>
<body>
<h2>setInterval 공부</h2>
<p id="demo"></p>
<script>
setInterval(myTimer, 1000);
function myTimer() {
let date = new Date();
document.getElementById("demo").innerHTML = date.toLocaleTimeString();
}
</script>
</body>
</html>
위 코드는 1초 마다 myTimer() 함수가 실행하고 함수에서는 date.toLocaleTimeString() 메소드를 실행해서 시간을 보여주고 있어.
new Date() 생성자를 사용하면 날짜.시간과 관련된 다양한 속성과 메소드를 사용할 수 있어.
new 키워드를 사용한 객체 생성은 이미 XMLHttpRequest 에서 배운바 있지?
toLocaleTimeString 에 대해서는 구글에서 한 번 검색을 해봐.
이제 여러분도 웬만한 코드들은 검색하면 이해를 할 수준이 벌써 되었어.
■ window 객체
여기서 window 객체에 대해 알고 지나 가자구.
우리가 지금까지 배운 여러가지 명령(속성이나 메소드)는 모두 점(.)을 사용해서 어떤 객체에 대한 명령인지를 표시했어.
예를들어..
document.getElementById("demo").innerHTML
m.style.setProperty("display", "none")
frm.id.value
...
맨 앞이 어떤 객체인지를 나타내고 뒤에 속성이나 메소드를 지정했어.
그런데 이번에 배운 setTimeout() 과 setInterval() 은 그런 소속 객체를 지정하지 않았네?
사실은 여기도 객체가 있어. 바로 window 로 최상위 객체라고 할 수 있어.
window 객체 document 객체가 있고 그 안에 <div> <h1> <p> 등 문서의 내용들이 있는거야.
그러니 엄밀하게 따지면 document.getElementById 는 window.document.getElementById 인 것이지.
그런데 가뜩이나 명령어들이 긴데 앞에 window 까지 붙이면 너무 길어지잖아.
그래서 최상위 객체인 window 는 적지 않아도 돼.
이번 장에서 배운 setTimeout(), setInterval() 역시 window 객체에 대한 메소드이기 때문에 생략한 거야.
위의 예제를 window.setTimeout() , window.setInterval() 로 적어도 똑같이 잘 작동해.
그러니 앞으로 코드를 볼 때 맨 앞에 객체구분 없이 그냥 속성이나 메소드를 표시했다면
"아~ 이건 window 객체구나.." 라고 생각하면 돼.
우리가 지금까지 많이 사용하던 window 메소드가 하나 더 있지?
바로 alert() 야.
alert() 역시 window 객체에 대한 메소드였어.