[코딩애플;JS] setTimeout, setInterval 함수

   <div class="alert alert-danger">

        <span class="count">5</span>초 이내 구매시 사은품 증정!

      </div>

setTimeout(function(){},ms단위 시간); : 기다린 시간 후에 함수가 작동함

     //setTimeout 5초후에 한번 기능함.

     setTimeout(function(){

        document.querySelector('.alert-danger').style.display = "none";

     },5000);

5초 후에 '.alert-danger'가 안보이게 됨.

 

setInterval(function(){},ms단위 시간); :단위 시간 마다 함수가 반복됨.

     setInterval(function(){

        console.log('안녕');

     },5000);

 

5초마다 콘솔창에 '안녕'출력

 

 

 

**자바스크립트 문법 vs 브라우저 사용법

var, let, const, if, function... 등은 자바스크립트 만의 프로그래밍 문법이고

document.querySelector(), alert(), setTimeout(), addEventListener(); 요런 함수들은 브라우저 사용법.

둘이 혼합하여 사용해야함!

 

숙제) 1초마다 숫자가 1씩 감소하고 0이 되면 안보이도록 코드짜기

    var sec = 5;

   

    var timer = setInterval(function(){      

        sec= sec - 1;

        document.querySelector('.count').innerHTML = sec;  

        if(sec <= 0){

            clearTimeout(timer);

            document.querySelector('.alert-danger').style.display = "none";

        }

    },1000);

    setTimeout(timer,5000);

 

sec를 변수로  html상에 있는 카운트 숫자를 저장하고,

sec값에 따라 0보다 작을 경우에는 안보이도록,

그 이상일 경우 sec은 하나씩 감소되고, .count에 새로운 sec값을 넣어줌.

이것을 setInterval에 넣음.

clearTimeout으로 setInterval 함수 종료