시간을 달리는 setInterval()

jellykelly·2023년 7월 15일

JavaScript UI interaction

JavaScript

목록 보기

2/4

호출 스케줄링 (scheduling a call)

setInterval()

setInterval() 은 일정 시간 간격마다 함수를 실행합니다.
이 메서드는 간격(interval)을 고유하게 식별할 수 있는 interval ID를 반환합니다.

setInterval(() => console.log('setInterval') , 2000); //2초마다 콘솔에 setInterval 출력

setTimeout()

setTimeout() 은 일정 시간이 지난 후에 함수를 실행합니다.
이 메서드는 양수 값의 timeoutID를 반환합니다.

setTimeout(() => console.log('setTimeout') , 5000); // 실행 5초 뒤 콘솔에 setTimeout 출력

setTimeout은 비동기 함수이기 때문에 순차적으로 실행되지 않는 경우도 있습니다.

setTimeout(() => {console.log("첫 번째 메시지")}, 5000);
setTimeout(() => {console.log("두 번째 메시지")}, 3000);
setTimeout(() => {console.log("세 번째 메시지")}, 1000);

// 콘솔 출력:

// 세 번째 메시지  
// 두 번째 메시지
// 첫 번째 메시지

🍞 토스트 팝업 구현

일정 시간이 지나면 자동으로 닫히는 toast 팝업을 구현해 보았습니다.

버튼을 클릭하여 팝업을 오픈하고, setInterval()로 1초씩 카운트한 후 setTimeout()으로 5초 후에 자동으로 팝업을 닫는 구조입니다.

소스코드

<button onclick="toastOpen()">Button</button>

<div id="toast" class="hide">
  <div>
    <span id="sec"></span>초 뒤 자동으로 닫힙니다
  </div>
</div>

const toast = document.getElementById('toast'),
    sec = document.getElementById('sec');

let i;

function toastOpen() {
    toast.classList.remove('hide');
    toast.classList.add('show');
  
    toastAutoClose();
}

// 자동으로 닫기
function toastAutoClose() {
  	i = 5;
    count();

    setTimeout(() => {
        toast.classList.add('hide');
    }, `${i}000`);
}


// 초 카운트다운
function count() {
    sec.innerText = i;

    setInterval(() => {
        if (i > 0) {
            i--;
            sec.innerText = i;
        } else {
            return
        }
    }, 1000);
}

🚨 오류 발생

버튼을 연속으로 클릭하거나 최초 실행 후 재실행하는 경우,
1초 간격으로 설정해 놓은 setInterval이 더 빠르게 줄어들어버립니다...? 😱

💡 버튼을 클릭했을 때, setInterval 함수 내에서 흐르고 있는 시간을 초기화 시켜보자

clearInterval(), claerTimeout()

setInterval(), setTimeout()을 호출하고 반환받은 값을 clearInterval(), claerTimeout()에 넘겨주면 스케줄링을 취소할 수 있습니다.

clearInterval(식별 ID);
clearTimeout(식별 ID)

소스 수정

let i;
let countSec;
let countdown;

// 자동으로 닫기
function toastAutoClose() {
  	i = 5;
  
  	clearTimeout(countdown); 
    clearInterval(countSec); 

    count();

    countdown = setTimeout(() => {
        toast.classList.add('hide');
    }, `${i}000`);
}


// 초 카운트다운
function count() {
    sec.innerText = i;

    countSec = setInterval(() => {
        if (i > 0) {
            i--;
            sec.innerText = i;
        } else {
            return
        }
    }, 1000);
}