[Window_Object] JS - setTimeout() 메서드 ★★★ - 일정시간 후 1회 할일 지정. (= 촉발시간설정 = setTimeout메서드 = 셋타임아웃 메서드) #얼럿창띄우기 #새로고침 #시간차 링크 이동

목차

1. setTimeout() 예제 - 일정시간 후 얼럿창 띄우기
2. setTimeout() 예제 - 일정시간 후 숨기기 (= 사라지게 하기)
3. setTimeout() 정의
4. setTimeout() 구문
5. setTimeout() 단점 - 지정 시간에 콜백함수 실행 담보 X
6. setTimeout() 예제 - 서서히 나타나 일정 간격으로 깜빡임 설정
7. setTimeout() 예제 - 일정시간 후 페이지 자동 새로고침
8. setTimeout() 예제 - 일정시간 후 페이지 이동/납치
9. 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++) {

      doSomething(); // 가정 : 매번 1초 소요

      console.log(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>

결과보기