[JavaScript] setTimeout, setInterval 타이머 설정하기

setTimeout()

: 일정 시간이 지나면 코드를 실행해주는 자바스크립트의 기본 함수

setInterval()

: 일정 시간마다 코드를 실행해주는 자바스크립트의 기본 함수

setTimeout(function(){실행코드}, 시간);
setInterval(function(){실행코드}, 시간);

시간은 ms 단위 (1000ms는 1초)

 

 

setTimeout 예시)

5초 후에 div 박스 사라지게 만들기

<div class="alert alert-danger">
	5초 이내 구매시 사은품 증정!
</div>
<script>
	setTimeout(function(){
    document.querySelector('.alert').style.display='none'  
    }, 5000)
</script>

 

setInterval 예시)

5초 중 1초마다 숫자 작아지고

타임아웃되면 div 박스 사라지게 만들기

  <div class="alert alert-danger">
    <span class='min'>5</span>초 이내 구매시 사은품 증정!
  </div>
  
  <script>
    var timer = setInterval(countDown, 1000)
    function countDown(){
      if (document.querySelector('.min').innerHTML>0) {
        document.querySelector('.min').innerHTML-=1;
      } else {
        clearTimeout(timer);
        document.querySelector('.alert').style.display='none';
      }
    }
  </script>

 

countDown이라는 콜백함수를 만들었지만 

document.querySelector('.min').innerHTML이 중복되어 코드가 깔끔하지 못함

 

  <div class="alert alert-danger">
    <span class='min'>5</span>초 이내 구매시 사은품 증정!
  </div>
  
  <script>
    var count=5;
    setInterval(function(){
      count-=1;
      if(count>=0){
        document.querySelector('.min').innerHTML = count;
      }
    }, 1000)
  </script>

변화하는 초 값을 count 변수로 만들어 document.querySelector('.min').innerHTML에 입력한다