window 객체 타이머 관리: setTimeout과 setInterval 사용 예제

웹 개발에서 타이머를 사용하면 특정 작업을 일정 시간 간격으로 반복하거나 일정 시간이 경과한 후에 실행할 수 있습니다. 자바스크립트에서는 window 객체의 setTimeout과 setInterval 메서드를 사용하여 타이머를 구현할 수 있습니다. 이번 글에서는 이 두 메서드의 사용 방법과 예제를 알아보겠습니다.

▼ window 객체의 주요 속성과 메서드

속성/메서드	설명
window.innerHeight	브라우저
window.innerWidth	브라우저 창의 내부 너비를 반환합니다.
window.outerHeight	브라우저 창의 외부 높이를 반환합니다.
window.outerWidth	브라우저 창의 외부 너비를 반환합니다.
window.pageXOffset	문서가 가로로 스크롤된 픽셀 수를 반환합니다.
window.pageYOffset	문서가 세로로 스크롤된 픽셀 수를 반환합니다.
window.alert()	알림 다이얼로그를 표시합니다.
window.confirm()	확인 다이얼로그를 표시하고, 사용자의 선택에 따라 true 또는 false를 반환합니다.
window.prompt()	프롬프트 다이얼로그를 표시하고, 사용자의 입력값을 반환합니다.
window.setTimeout()	지정된 시간이 경과한 후 함수를 실행하도록 예약합니다.
window.setInterval()	지정된 시간 간격으로 함수를 반복 실행하도록 예약합니다.
window.clearTimeout()	setTimeout()으로 예약된 함수 실행을 취소합니다.
window.clearInterval()	setInterval()로 예약된 함수 실행을 취소합니다.
window.open()	새 창이나 탭을 여는 데 사용됩니다.
window.close()	현재 창이나 탭을 닫습니다.
window.moveTo()	브라우저 창의 위치를 변경합니다.
window.resizeTo()	브라우저 창의 크기를 변경합니다.

1. setTimeout()

setTimeout 메서드는 지정된 시간이 경과한 후에 함수를 한 번 실행합니다.

1. 사용법

setTimeout(function, delay);

function: 지연 시간이 경과한 후에 실행할 함수
delay: 함수를 실행하기 전 대기할 시간(밀리초 단위)

2. 사용 예제: 3초 후에 “BlueShare, Blog!”를 콘솔에 출력

setTimeout(function() {
  console.log("BlueShare, Blog!");
}, 3000);

2. setInterval()

setInterval 메서드는 지정된 시간 간격으로 함수를 반복해서 실행합니다.

1. 사용법

setInterval(function, interval);

function: 반복 실행할 함수
interval: 함수 실행 사이의 시간 간격(밀리초 단위)

2. 사용 예제: 1초마다 현재 시간을 콘솔에 출력

setInterval(function() {
  console.log(new Date());
}, 1000);

3. 타이머 제거하기: clearTimeout(), clearInterval()

타이머를 취소하려면 clearTimeout 또는 clearInterval 메서드를 사용합니다. setTimeout과 setInterval 메서드는 각각 타이머 ID를 반환합니다. 이 타이머 ID를 사용하여 해당 타이머를 제거할 수 있습니다.

1. 사용 예제: setTimeout으로 설정된 타이머를 취소

var timerId = setTimeout(function() {
    console.log("실행되지 않습니다.");
}, 3000);

clearTimeout(timerId);

2. 사용 예제: setInterval로 설정된 타이머를 취소

var intervalId = setInterval(function() {
    console.log("한 번만 실행됩니다.");
    clearInterval(intervalId);
}, 1000);

☞ setTimeout과 setInterval 메서드를 활용하면 다양한 상황에서 웹 페이지의 동작을 제어할 수 있습니다. 이러한 메서드를 사용하여 사용자 경험을 향상하거나 웹 페이지의 동작을 개선할 수 있습니다.

함께 보면 좋은 게시글

이 글이 도움이 되셨다면 공유 부탁 드립니다.

window 객체 타이머 관리: setTimeout과 setInterval 사용 예제

1. setTimeout()

2. setInterval()

3. 타이머 제거하기: clearTimeout(), clearInterval()

함께 보면 좋은 게시글

동일 카테고리 게시글