목차
setTimeout() 예제 - 일정시간 후 얼럿창 띄우기 setTimeout() 예제 - 일정시간 후 숨기기 (= 사라지게 하기) setTimeout() 정의 setTimeout() 구문 setTimeout() 단점 - 지정 시간에 콜백함수 실행 담보 X setTimeout() 예제 - 서서히 나타나 일정 간격으로 깜빡임 설정 setTimeout() 예제 - 일정시간 후 페이지 자동 새로고침 setTimeout() 예제 - 일정시간 후 페이지 이동/납치 setTimeout() 예제 - 클릭 시 일정시간 후 페이지 이동/납치
※ 1회성 시간 측정해, 일정 시간 후 어떤 행위를 실행시킬 때 사용.
setTimeout() 예제 - 일정시간 후 얼럿창 띄우기
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
setTimeout(function(){ alert("홈짱닷컴 Homzzang.com"); }, 3000);
}
</script>
결과보기
※ 클릭 후 3초 후에 얼럿창 뜸. 확인 누르면 계속 3초 후 뜸.
PS. 관련글: 하틴 님 (190917) https://sir.kr/qa/323614
setTimeout() 예제 - 일정시간 후 숨기기 (= 사라지게 하기)
<script>
function hideHz() {
document.getElementById("hz").style.display="none";
}
self.setTimeout("hideHz()",3000); // 1초: 1000
</script>
<style>
#hz {padding:50px; border:2px solid silver}
</style>
<div id="hz">홈짱닷컴 Homzzang.com - 3초 후에 뿅 !!</div>
결과보기
setTimeout() 정의
지정된 밀리 초 후에 함수를 호출하거나 표현식을 평가.
1.
1000ms = 1 초.
2. cf.
setTimeout() 메서드 : 오직 한 번만 실행 하는 경우 사용.
setInterval() 메서드 : 실행을 반복 해야하는 경우 사용.
3.
clearTimeout() 메서드 : 타이머를 해제해, 함수 실행 안 되게 할 때 사용.
setTimeout() 구문
setTimeout(function, milliseconds, param1, param2, ... )
[매개변수]
function
필수. 정해진 시간 되면 실행시킬 함수.
milliseconds
필수. 함수를 실행시키기 위해 기다려야 하는 시간. (기본값: 0)
※ 밀리초로 표현. (예: 3000 = 3초)
param1, param2, ...
선택. 함수에 전달할 매개변수.
※ IE9 및 그 이전 버전은 지원 X
[반환값]
설정된 타이머의 ID 값을 나타내는 숫자 반환.
※ 타이머를 취소하려면, clearTimeout() 메서드와 함께 이 값을 사용.
setTimeout() 단점 - 지정 시간에 콜백함수 실행 담보 X
JS 타이머(setTimeout / setInterval)는 지정 시간에 콜백함수 실행 담보 X
∵ 싱글 콜 스택. 즉, 한번에 하나의 요청만 실행 가능하기 때문.
[예제] https://youtu.be/iNH4UQxZexs
<script>
function yo() {
setTimeout(function () {
console.log('1.5초 타이머 끝!')
}, 1500);
for(let i=0; i<3; i++) {
}
console.log('3초 걸리는 for문 끝!')
}
yo();
console.log('main 끝!');
</script>
결과보기
즉, 3초 소요 반복문 작업을 중간에 멈출 수 없어 1.5초후 실행 예약된 파란색 코드가 3초 지나서야 실행됨.
setTimeout() 예제 - 서서히 나타나 일정 간격으로 깜빡임 설정
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#hz").fadeIn(5000);
setTimeout(function(){
$("#hz").fadeOut();
setInterval (function(){
$("#hz").fadeOut(500).delay(500).fadeIn(3000);
}, 3000);
}, 1000);
});
});
</script>
<style>
#hz {width:80px;height:80px;display:none;background-color:blue; margin-top:30px;}
</style>
<button>클릭</button>
<div id="hz"></div>
결과보기
grsosik 님 (210223) https://sir.kr/qa/401205
setTimeout() 예제 - 일정시간 후 페이지 자동 새로고침
<script>
setTimeout(function(){location.reload() ;},100); // 0.1초 후 새로고침
</script>
setTimeout() 예제 - 일정시간 후 페이지 이동/납치
<script>
setTimeout('gotoPage()', 3000); // 3초 후 실행
function gotoPage(){
location.href ="https://homzzang.com" // 이동주소
}
</script>
setTimeout() 예제 - 클릭 시 일정시간 후 페이지 이동/납치
[현재창에서 이동]
<a href="javascript:move_gap()">홈짱닷컴 바로가기</a>
<script>
function move_gap() {
setTimeout(function() {
location.href = 'https://homzzang.com';
}, 2000);
}
</script>
결과보기
[새창에서 이동]
<a href="javascript:move_gap()">홈짱닷컴 바로가기</a>
<script>
function move_gap() {
setTimeout(function() {
window.open ('https://homzzang.com', '_blank');
}, 2000);
}
</script>
결과보기
