[JS] setTimeout, setInterval 로 타이머⏰ 만들기

이번에는 setTimeout 과 setInterval 을 알아보자

---

 

setTimeout

 

setTimeout()을 쓰면 n초 후에 코드를 실행시켜 준다

 

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

 

위와 같이 사용하면 된다

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

 

setTimeout(function(){ 
  console.log('안녕')
}, 1000);

 

위처럼 쓰면 1초 후에 콘솔창에 '안녕'이 뜬다

 

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

<script>
setTimeout(function(){$('.alert').hide()}, 5000)
</script>

 

이렇게 쓰면 alert 창이 5초 후에 사라지게 된다

따로 추가할 필요 없이 jQuery에서 .hide() 를 사용해서 알림창을 쉽게 사라지게 만들 수 있다 굿!

 

 

 

setInterval

 

n초'마다' 뭔가를 실행하고 싶으면 setInterval을 사용한다

 

setInterval(function(){ console.log('안뇽') }, 1000)

 

위와 같이 작성하면 1초마다 '안뇽'을 띄워준다

setTimeout과 달리 매 초가 흐를때마다 안뇽이 반복적으로 뜨게 된다

 

참고로 setTimeout 이나 setInterval 의 function(){} 자리에는 별도로 함수를 만들어서 간단하게 넣을 수도 있다

아래 예시를 참고해보자

 

setInterval(함수, 1000)

function 함수() {
	console.log('안녕 난 함수야')
}

 

이 경우 함수를 넣을 때 () 뒷부분 없이 함수만 넣는 것에 유의해야 한다 

 

 

++ 참고) 타이머를 삭제하고 싶을 때 clearTimeout() 사용!

 

---

 

문제 :  타이머 만들기

문제

위에서 만든 <div>안에 "5초 이내 구매시 사은품 증정" 이라는 문자가 있습니다.
1초마다 5라는 문자를 1씩 감소시켜봅시다.
0이 되면 <div>를 안보이게 처리합시다. 

(힌트) 5라는 문자만 <span>5</span> 이걸로 감싸면 html 조작하기 쉬워집니다. 

 

 

풀이

 

- time을 5라고 선언하고, 타이머 함수가 1초마다 실행되는 setInterval 을 만든다

- time은 1씩 줄어든다고 하고, time이 5보다 작으면 span인 .timer의 텍스트에 1씩 줄어드는 글자를 넣는다

   -> 텍스트를 찾을 때는 jQuery로 .text() 를 사용하여 innerText 대신 사용하였다 ㅎㅎ

- 만약 time이 0이 된다면 전체 배너인 .alert를 숨긴다

- 아직은 setInterval 옆에 함수를 직접 쓰려니 눈에 잘 들어오지도 않고 헷갈려서 함수를 따로 만든 후 넣었는데, 익숙해지기 위해 바로 옆에 작성해보는 연습도 해야겠다

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

   <script>
      let time = 5;
      setInterval(타이머, 1000);

      function 타이머() {
        time = time - 1;
        if (time < 5) {
          $('.timer').text(time);
        }
        if (time === 0) {
          $('.alert').hide();
        }
      }
   </script>

 

해답

 

- 0초가 되면 .alert가 사라지는 기능은 구현되어 있지 않다

- 나는 count = count - 1 이렇게 적지 않으면 헷갈려서 일부러 축약형을 안적었는데, 확실히 줄여서 적는 게 깔끔한 것 같다. 나도 줄여서 적는 연습을 해봐야지

- if 문에서 count < 5 가 아니라 count >=0 으로 조건을 설정했다. 그런데 이 경우 (문제에서 요구한 것과 달리) 0이 포함되어 있어 0이 되어도 숫자가 그대로 보이는 점 + 알림창은 사라지지 않음.. 의 문제로 인해 출제된 것과는 다소 차이가 있는 코드로 보인다

- if 문 안에서는 jQuery를 사용하지 않고 일반 자바스크립트 문법을 사용하였다. 어떨 때는 jQuery를 쓰고 어떨 때는 안쓰시는데 사용하는 기준이 뭔지가 좀 궁금하다

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

<script>
  var count = 5;

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

 

해답 본 후 수정해보기

 

- 별도로 만들지 않고 setInterval 내부에 함수를 직접 작성하였다

- time이 1씩 줄어드는 것을 축약형으로 다시 작성하였다

- 조건문에서 time이 0보다 클 경우와 0일 경우로 나눠 작성하였다

      let time = 5;

      setInterval(function() {

        time -= 1;

        if ( time > 0 ) {
          $('.timer').text(time);
        } 
        else if ( time == 0 ) {
          $('.alert').hide();
        }

      }, 1000);

 

 

 

 

 

 

 

---

 

TIL 끝!