왕진 블로그
반응형
Web Development · JavaScript
JavaScript 타이머
setInterval() 반복 실행과 setTimeout() 지연 실행, clear 계열 중단 방식을 정리합니다.
시작 오늘 분석할 코드
이 예제는 브라우저 window 객체가 제공하는 시간 제어와 창 제어 기능을 다룹니다. 타이머는 특정 함수를 나중에 또는 반복해서 실행하고, window.open은 별도 브라우저 창을 제어합니다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>setInterval()로 텍스트 회전</title></head> <body> <h3>텍스트가 자동 회전하며, 마우스로 클릭하면 중단합니다.</h3> <hr> <div><span id="span" style="background-color:yellow"> 자동 회전하는 텍스트입니다.</span> </div> <script> let span = document.getElementById("span"); let timerID = setInterval("doRotate()", 200); // 200밀리초 주기로 doRotate() 호출 span.onclick = function (e) { // 마우스 클릭 이벤트 리스너 clearInterval(timerID); // 타이머 해제. 문자열 회전 중단 } function doRotate() { let str = span.innerHTML; let firstChar = str.substr(0, 1); let remains = str.substr(1, str.length-1); str = remains + firstChar; span.innerHTML = str; // str 텍스트를 span 객체에 출력 } </script> </body> </html> <!-- 다음 window/timer 예제 --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>setTimeout()으로 웹 페이지 자동 연결</title> </head> <body> <h3>이미지에 마우스를 올리고 5초간 그대로 있을 때 사이트로 이동합니다</h3> <hr> <img id="img" src="media/naver.gif" onmouseover="startTimer(5000)" onmouseout="cancelTimer()"> <script> let timerID=null; function startTimer(time) { // 타이머 시작 timerID = setTimeout("load('http://www.naver.com')", time); // 툴팁 메시지 document.getElementById("img").title = "타이머 작동 시작..."; } function cancelTimer() { if(timerID !=null) clearTimeout(timerID); // 타이머 중단 } function load(url) { window.location = url; // 현재 윈도우에 url 사이트 로드 } </script> </body> </html>
실제 출력 미리보기
자동 회전하는 텍스트입니다.
5초 유지 시 이동하는 타이머가 시작된 상태
용어 용어 정리
window브라우저 창을 나타내는 최상위 객체입니다.
setInterval일정 시간마다 함수를 반복 실행합니다.
setTimeout지정한 시간이 지난 뒤 함수를 한 번 실행합니다.
timerID타이머를 취소하기 위해 저장하는 식별자입니다.
window.open새 창을 열고 그 창을 가리키는 참조를 반환합니다.
closed창이 이미 닫혔는지 알려주는 window 참조의 프로퍼티입니다.
1 실행 시점을 제어하는 이유
모든 코드를 즉시 실행하면 사용자 동작이나 시간 흐름에 반응하기 어렵습니다. 타이머는 시간이 지난 뒤 실행하거나 일정 주기로 반복 실행해야 할 때 사용합니다.
이벤트/시간
→
함수 실행
→
DOM 변경
2 setInterval 반복 실행
setInterval()은 지정한 간격마다 함수를 반복 호출합니다. 텍스트 회전 예제는 200ms마다 문자열의 첫 글자를 뒤로 보내 span 내용을 갱신합니다.
let timerID = setInterval("doRotate()", 200); clearInterval(timerID);
반복 타이머는 반드시 멈출 조건을 함께 설계해야 합니다.
3 setTimeout 지연 실행
setTimeout()은 일정 시간이 지난 뒤 함수를 한 번만 실행합니다. 이미지 위에 5초 동안 머물면 사이트로 이동하고, 마우스가 빠지면 타이머를 취소합니다.
setInterval
계속 반복합니다. clearInterval로 중단합니다.
setTimeout
한 번 실행합니다. clearTimeout으로 취소합니다.
반응형
4 문자열 실행과 함수 전달
원본 예제는 setInterval("doRotate()", 200)처럼 문자열을 사용합니다. 학습용으로 동작은 하지만, 실무에서는 문자열 대신 함수 참조를 넘기는 방식이 더 안전합니다.
setInterval(doRotate, 200); setTimeout(function () { load("https://example.com"); }, 5000);
5 window.open 옵션
window.open(URL, name, option)은 새 창을 열고, 이름과 위치·크기 옵션을 지정할 수 있습니다. 팝업 차단 정책 때문에 사용자 클릭 없이 열면 막힐 수 있습니다.
| 인자 | 의미 | 예시 |
|---|---|---|
| URL | 열 주소 | http://www.graceland.com |
| name | 창 이름 | myWin |
| left/top | 창 위치 | left=300,top=300 |
| width/height | 창 크기 | width=400,height=300 |
6 새 창 닫기
새 창을 나중에 닫으려면 window.open()이 반환한 참조를 변수에 저장해야 합니다. 닫기 전에 null인지, 이미 closed인지 확인하면 오류를 줄일 수 있습니다.
1
새 창 열기newWin = window.open(...)
2
상태 확인newWin이 null이거나 closed인지 검사합니다.
3
닫기 실행열려 있으면 newWin.close()를 호출합니다.
7 현재 창 이동과 닫기
window.location에 URL을 대입하면 현재 창이 해당 주소로 이동합니다. window.close()는 현재 창 닫기지만, 브라우저 정책상 스크립트가 열지 않은 창은 닫히지 않을 수 있습니다.
| 코드 | 동작 | 주의 |
|---|---|---|
| window.location = url | 현재 창 이동 | 기록에 남을 수 있음 |
| window.open(...) | 새 창 열기 | 팝업 차단 가능 |
| newWin.close() | 새 창 닫기 | 참조 필요 |
| window.close() | 현재 창 닫기 | 정책상 제한 가능 |
8 자주 하는 실수
| 실수 | 증상 | 해결 |
|---|---|---|
| timerID를 저장하지 않음 | 타이머를 중단할 수 없습니다. | setInterval/setTimeout 반환값을 변수에 저장합니다. |
| clear 함수 종류를 혼동 | 타이머가 계속 동작합니다. | interval은 clearInterval, timeout은 clearTimeout을 사용합니다. |
| 문자열로 코드 실행 | 디버깅과 보안에 불리합니다. | 함수 참조나 익명 함수를 전달합니다. |
| 새 창 참조를 저장하지 않음 | 나중에 닫을 수 없습니다. | window.open 결과를 변수에 담습니다. |
| closed 확인 없이 close 호출 | 이미 닫힌 창을 조작하려 합니다. | null과 closed를 먼저 검사합니다. |
9 최종 체크리스트
| 체크 | 통과 기준 |
|---|---|
| 반복 실행 | setInterval과 clearInterval 관계를 압니다. |
| 지연 실행 | setTimeout과 clearTimeout 관계를 압니다. |
| 창 열기 | window.open의 URL, 이름, 옵션을 구분합니다. |
| 창 닫기 | 새 창 참조와 closed 검사를 이해합니다. |
| 브라우저 정책 | 팝업 차단과 close 제한 가능성을 고려합니다. |
핵심 한 줄 요약
timersetInterval은 반복, setTimeout은 한 번 지연 실행이며 clearInterval/clearTimeout으로 중단합니다.
timerID타이머를 멈추기 위해 반드시 저장합니다.
newWin새 창을 제어하려면 window.open 결과 참조가 필요합니다.
policy팝업과 창 닫기는 브라우저 정책의 영향을 받습니다.
Tags
#JavaScript #window #setInterval #setTimeout #clearInterval #clearTimeout #window.open #window.close #timer #티스토리
▼ 티스토리 태그 입력란 복사용
JavaScript, window, setInterval, setTimeout, clearInterval, clearTimeout, window.open, window.close, timer, 티스토리
반응형
'php' 카테고리의 다른 글
| JavaScript window.print · onbeforeprint 완전 정리 (0) | 2026.07.06 |
|---|---|
| JavaScript 스크롤·위치·크기 — scrollBy·moveBy·resizeBy 완전 정리 (1) | 2026.07.05 |
| JavaScript window.open · close — 윈도우 열기·닫기 완전 정리 (0) | 2026.07.05 |
| JavaScript 키 이벤트 — e.key·e.code·방향키 이동 완전 정리 (0) | 2026.07.05 |
| JavaScript 폼 입력 요소 — onfocus·radio·checkbox 완전 정리 (0) | 2026.07.05 |
댓글