javascript : setTimeout , setInterver 사용해서 타이머 해보기

setTimeout : 한번만 실행

---

공식 :

setTimeout ( function(){} , 초 )

 

5초뒤에 alert 창을 띄우고  싶다면?

예시 1  )

 

setTimeout( function () { 

alert ( " 5초뒤실행 " )

} , 5000 )

 

 

예시2 ) 함수명으로도 사용이 가능하다.

 

setTimeout( 출력 , 5000)

 

function 출력 ( ) {alert("5초뒤 실행")}

---

setInterver : 초 마다 실행

---

공식 :  setInterver ( function(){} , 1000 ) 

 

예시)

  setInterver ( function(){

alert(" 1초마다 반복실행 ")

} , 1000 ) 

 

alert 는 한번실행이 아니라 1초마다 계속 반복실행이 된다.

 

 

---

 

타이머를 만드는 실습 예제 )

 

 

문제 :

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

5초 이내 구매시 사은품 증정을 타이머로해서 0 이 되도록 나오게 하기

 

 

아래에는 답안이 있어요..!

 

 

 

 

 

 

 

<답안>

  count = 5;

  setInterval(function(){

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

 

setInterval 은 1초에 한번 반복으로 해당 내용을 실행시켜 준다.

count 를 담을 변수를 하나 만들어 5부터 시작하게 설정을 해주고

해당 함수내에서는 5가 -- 1씩 감소하게 한뒤

if 문으로 count가 0보다 클경우 안에 텍스트를 해당 감소된 숫자로 변환을 시키면

타이머가 마치 감소되는것처럼 실행을 시킬 수 있다.