아래 소스 코드는 setTimeout(), setInterval() 함수를 활용하여 버튼 클릭 시 반복되는 알림 메시지를 보여주는 예제입니다.
'안녕하세요. 반갑습니다.' 메시지가 5초 간격으로 총 3번 반복해서 표시되며, 15초가 지나면 반복이 종료됩니다. 3초 후에는 삭제완료 메시지가 나타나도록 생성해서 확인하실 수 있습니다.
setTimeout()
주어진 시간이 지난 후에 한 번만 실행되는 타이머를 설정하는 함수입니다. 특정 작업을 일정 시간 이후에 실행할 수 있습니다.
setTimeout(callback, delay, arg1, arg2, ...)
- callback : 지연 이후에 실행될 콜백 함수입니다. 타이머가 만료된 후에 한 번 실행됩니다.
- delay : 타이머가 만료되기까지의 지연 시간을 밀리초(ms) 단위로 지정합니다. 1000은 1초를 의미합니다.
- arg1, arg2 : (선택) 콜백 함수에 전달될 인수들입니다.
function sayHello(name) {
console.log(`Hello, ${name}!`);
}
// 3초 후에 sayHello 함수를 실행합니다.
setTimeout(sayHello, 3000, 'John');sayHello 함수는 3초 후에 실행되며, 'John'이라는 인수가 콜백 함수에 전달됩니다. 따라서 3초 후에 "Hello, John!"이라는 메시지가 콘솔에 출력됩니다.
setInterval()
주어진 시간 간격마다 반복적으로 특정 작업을 실행하는 타이머를 설정하는 함수입니다.
setInterval(callback, delay, arg1, arg2, ...)
- callback : 지정된 시간 간격마다 실행되는 콜백 함수입니다.
- delay: 콜백 함수 실행 사이의 간격을 밀리초(ms) 단위로 지정합니다. 1000은 1초를 의미합니다.
- arg1, arg2 : (선택) 콜백 함수에 전달될 인수들입니다.
function printMessage() {
console.log("Hello, world!");
}
// 2초 간격으로 printMessage 함수를 반복 실행
const intervalId = setInterval(printMessage, 2000);
// 10초 후에 반복 실행 종료
setTimeout(() => {
clearInterval(intervalId);
}, 10000);setInterval 함수로 타이머를 설정한 후, 10초 후에 clearInterval 함수를 사용하여 타이머를 종료합니다. 따라서 10초 동안 "Hello, world!" 메시지가 5번 출력된 후에 반복 실행이 종료됩니다.
setTimeout(), setInterval() 응용 예제
<!DOCTYPE html>
<html>
<body>
<button id="showBtn">실행하기</button>
<script>
function showNotification(message) {
const notificationDiv = document.createElement('div');
notificationDiv.classList.add('notification');
notificationDiv.textContent = message;
document.body.appendChild(notificationDiv);
// 3초 후에 알림을 제거하기 위해 setTimeout 사용
setTimeout(() => {
notificationDiv.remove();
const deleteDiv = document.createElement('div');
deleteDiv.classList.add('deleteNoti');
deleteDiv.textContent = '삭제완료';
document.body.appendChild(deleteDiv);
}, 3000);
}
function showRepeatedNotifications(message, interval) {
showNotification(message); // 최초 한 번은 즉시 실행
// 주어진 간격(interval)마다 알림 메시지를 보여줌
const intervalId = setInterval(() => {
showNotification(message);
}, interval);
// 일정 시간(여기서는 15초) 후에 반복 실행 종료
setTimeout(() => {
clearInterval(intervalId);
}, 15000);
}
document.getElementById('showBtn').addEventListener('click', () => {
showRepeatedNotifications('안녕하세요. 반갑습니다.', 5000);
});
</script>
</body>
</html>
'개발이야기 > 자바스크립트' 카테고리의 다른 글
| [자바스크립트] 업로드 파일 용량, 확장자, 특수문자 체크하기 (0) | 2023.08.28 |
|---|---|
| [자바스크립트] 신용카드 번호 자동으로 하이픈(-) 넣기 (oninput) (0) | 2023.08.25 |
| [자바스크립트] Plotly Chart 사용법, 예제, 차트 그리기 (0) | 2023.07.28 |
| [자바스크립트] Base64 사용방법/예제 (인코딩, 디코딩, 한글, 특수문자) (0) | 2023.07.28 |
| [자바스크립트] 카카오맵 API 이용해 카테고리 장소 마커로 보여주기 (2) | 2023.07.25 |
댓글