JavaScript에서 특정 작업을 몇 초 후에 실행하려면 setTimeout 함수를 사용할 수 있습니다. setTimeout 함수는 일정 시간(밀리초 단위)이 지난 후에 지정된 함수를 실행합니다.
사용법:
setTimeout(function, delay);
function: 지연 후 실행할 함수
delay: 지연 시간(밀리초 단위)
예제 1 - 간단한 예제:
setTimeout(function() {
console.log("3초 후에 이 메시지가 출력됩니다.");
}, 3000);
예제 2 - 화살표 함수 사용:
setTimeout(() => {
console.log("5초 후에 이 메시지가 출력됩니다.");
}, 5000);
예제 3 - 함수 참조 전달:
function showMessage() {
console.log("2초 후에 이 메시지가 출력됩니다.");
}
setTimeout(showMessage, 2000);
예제 4 - DOM 조작 예제:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>setTimeout Example</title>
</head>
<body>
<div id="message">메시지가 여기에 나타납니다.</div>
<script>
setTimeout(() => {
document.getElementById("message").textContent = "4초 후에 이 메시지가 나타납니다.";
}, 4000);
</script>
</body>
</html>더보기
설명:
간단한 예제: 3초 후에 콘솔에 메시지를 출력합니다.
화살표 함수 사용: 5초 후에 콘솔에 메시지를 출력합니다.
함수 참조 전달: showMessage라는 함수를 정의하고, 2초 후에 실행합니다.
DOM 조작 예제: setTimeout을 사용하여 4초 후에 div 요소의 텍스트 내용을 변경합니다.
이 예제들은 JavaScript에서 setTimeout 함수를 사용하여 특정 작업을 지연시키는 방법을 보여줍니다. setTimeout은 비동기적으로 동작하므로, 지연 시간 동안 코드의 다른 부분이 계속 실행될 수 있습니다.
'tech > javascript' 카테고리의 다른 글
| 그누보드 어드민 페이지에서 메뉴 오버-> 서브 메뉴가 GNB 좌측 아래에 보이는 증상 (0) | 2012.11.27 |
|---|---|
| 1000단위 콤마, 소숫점 (0) | 2012.10.10 |
| input 박스 키워드 (0) | 2012.10.05 |
| 그누보드 어드민 페이지_GNB에 마우스 오버 시 서브 메뉴 정상적이지 않는 것 (0) | 2012.09.27 |
| prototype 프레임웍과 jquery를 같이 쓰기 (0) | 2012.03.16 |