• Q&A
  • 회원가입
  • 로그인

[Window] JS - setTimeout() 메서드 ★★★ - 밀리초로 시간간격 시간설정. (= 1회만/한번만 할일 설정. = setTimeout메서드 = 셋타임아웃 메서드) ※ 일정시간후 얼럿창띄우기. (= 특정시간후 경고창띄우기), 숨기

목차

  1. setTimeout() 예제 - 일정시간 후 얼럿창 띄우기
  2. setTimeout() 예제 - 일정시간 후 숨기기 (= 사라지게 하기)
  3. setTimeout() 정의
  4. setTimeout() 단점 - 지정 시간에 콜백함수 실행 담보 X
  5. setTimeout() 예제 - 서서히 나타나게 한 후, 일정 간격으로 깜빡이게 하기
  6. 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.

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>

 

 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012