반응형
자바스크립트의 setTimeout() 은 특정 시간이 지난 후에 한 번만 함수를 실행하도록 예약하는 타이머 함수입니다.
📌 문법
setTimeout(실행할_함수, 지연시간(ms), [추가인자...]);- 실행할_함수: 일정 시간이 지난 뒤 실행할 함수
- 지연시간(ms): 밀리초 단위 (1000ms = 1초)
- 추가인자: 함수에 전달할 인자(옵션)
📌 기본 예제
console.log("1. 시작");
setTimeout(() => {
console.log("2. 2초 후 실행됨");
}, 2000); // 2000ms = 2초
console.log("3. 끝");실행 순서
- console.log("1. 시작") → 바로 출력
- setTimeout 예약 (2초 후 실행)
- console.log("3. 끝") → 바로 출력
- 약 2초 후 → console.log("2. 2초 후 실행됨") 실행
👉 출력
1. 시작
3. 끝
2. 2초 후 실행됨📌 함수에 인자 전달하기
function greet(name) {
console.log("안녕하세요, " + name + "!");
}
setTimeout(greet, 3000, "철수"); // 3초 후 "안녕하세요, 철수!" 실행📌 실습 예제 (HTML 버튼과 함께)
아래는 버튼을 누르면 5초 후에 알림이 뜨는 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>setTimeout 예제</title>
</head>
<body>
<button onclick="startTimer()">5초 후 알림</button>
<script>
function startTimer() {
alert("5초 후에 알림이 뜹니다!");
setTimeout(() => {
alert("⏰ 5초 지났습니다!");
}, 5000);
}
</script>
</body>
</html>📌 setTimeout 취소하기
setTimeout은 취소할 수도 있습니다.
setTimeout 실행 시 반환되는 ID를 clearTimeout() 에 넘기면 됩니다.
let timerId = setTimeout(() => {
console.log("실행되지 않습니다.");
}, 3000);
clearTimeout(timerId); // 예약 취소
👉 정리하면,
- setTimeout은 특정 시간 후 한 번만 실행
- setInterval은 특정 시간마다 반복 실행
반응형
'자바스크립트_Javascript' 카테고리의 다른 글
| 자바스크립트: 배열(Array) 정리 (0) | 2025.08.23 |
|---|---|
| 자바스크립트: setInterval() 함수, 특정 시간마다 반복적으로 함수를 실행 (1) | 2025.08.22 |
| 자바스크립트: onload 이벤트, 웹페이지나 특정 요소가 로드된 후 발생 (0) | 2025.08.20 |
| 자바스크립트: onchange 이벤트, 값이 변경될 때 발생 (0) | 2025.08.20 |
| 자바스크립트: onclick 이벤트, 버튼을 클릭할 때마다 문자열과 배경 변경하기 (6) | 2025.08.19 |