[JS] 타이머 설정하기 (몇 초 뒤에 / 몇 초 마다)

X초 후에 코드 실행
 setTimeout()

1) 첫 번째 파라미터는 무조건 콜백 함수.
2) 두 번째 파라미터는 초 단위

 

setTimeout(function(){ 실행할코드~ }, 기다릴시간);

 

5초 후 숨겨달라고 실행하기

hide() = display : none;  활용

  setTimeout(function(){
    $('.alert').hide();
  }, 5000);

5초 후에 코드를 실행

---

X초마다 코드를 실행
setInterval()

setInterval(function(){ 실행할코드~ }, 기다릴시간)

 

1초마다 5라는 문자를 1씩 감소 

<div class="alert alert-danger">
  <span id="num">5</span>초 이내 구매시 사은품 증정
</div>

  var count = 5;

  setInterval(function(){
    count -= 1;
    if (count >= 0){
      document.querySelector('#num').innerHTML = count;
    } 
  }, 1000);

1초마다 count 에 들어있는 숫자가 -1 씩 감소하면서 0 이 될 때까지 count 를 보여준다.

count 가 0보다 작아질 때 = 자동으로 타이머가 멈추도록 설정됨.

타이머를 삭제하고 싶으면

var timer = setInterval(어쩌구);

이렇게 변수에 넣어둔 다음

타이머 삭제하고 싶을 때 clearTimeout(타이머) 이 코드 실행

 

타이머 setInterval - 멈추기: clearInterval
타이머 setTimeout - 멈추기: clearTimeout

var timer = setInterval(function() {
  // 타이머 로직
});

// 타이머를 멈추고 싶을 때
clearInterval(timer);

var count = 5;

var timer = setInterval(function () {
  count--;
  if (count >= 0) {
    document.querySelector("#num").innerHTML = count;
  } else {
    // count가 0 이하가 되면 이 부분이 실행됩니다.
    clearInterval(timer);
    document.querySelector(".alert-danger").style.display = "none";
  }
}, 1000);