setTimeout와 setInterval (5초 뒤 삭제되는 알림창)

1. setTimeout 이란

• 작성된 코드를 일정 시간 이후 실행시켜 줍니다.
• setTimeout(function(){ 코드 }, 시간);
  • 시간의 경우 ms 단위 1000ms = 1초

setTimeout(function(){ console.log('반갑습니다') }, 1000);

 

 

 

2. setInterval 이란

• 작성된 코드를 일정 시간마다 반복적으로 실행을 해줍니다.
• setInterval(function(){ 코드 }, 시간);

setInterval(function(){console.log('HI')}, 3000);

 

 

 

3. 콜백 함수의 기능

• addEventListener()과 같이 setTimeout()도 콜백 함수를 요구를 한다.
• 다른 곳에 만든 함수를 이용해도 작동을 합니다. 

setTimeout(함수, 1000);

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

 

 

4. 이것을 이용한다면, 흔히 볼 수 있는 할인 알림 창을 구현 가능

<div class="alert alert-light">
        <span class="count">5</span>초 이내 클릭시 10% 할인 쿠폰 증정!
    </div>
    <script>
        var count = 5;
        setInterval(function () {
            count = count - 1;
            if (count > 0) {
                document.querySelector('.count').innerHTML = count;
            } else {
                document.querySelector('.alert').style.display = 'none';
            }
        }, 1000);
    </script>