[Javascript] setInterval 타이머 작동 시 alert창 오류 해결(setTimeout)

 

setInterval 을 통해 아래와 같은 타이머를 구현하였다.

 

function countDown(time) {
    let isStopped = false;

    let x = setInterval(function() {
        if (isStopped) {
     
            clearInterval(x);
            return;
        }

        min = parseInt(time / 60);
        sec = time % 60;

        if (sec < 10) sec = "0" + sec;
        if (min < 10) min = "0" + min;

        document.getElementById('restTime').innerHTML = min + ":" + sec;



        if (--time < 0) {
            clearInterval(x);
                alert('인증시간이 경과하였습니다. 재전송 후 다시 입력해주세요.');
                document.getElementById("certiNumInput").value = "";
                document.getElementById('restTime').innerHTML = "";
             
                isStopped = true;
         
        }
    }, 1000);
}

 

 

그런데 타이머 작동 도중 alert창이 띄워지면, 타이머가 멈추는 현상이 발생했다. 

찾아보니 자바스크립트에서 alert창은 동기적으로 실행되기 때문에 alert창이 띄워지면 countDown 함수가 실행되는 스레드가 일시적으로 멈추고, 이로 인해 타이머도 일시중지 되는 것이였다.

이를 방지하기 위해 alert창이 아닌 모달창을 사용하는 방법도 있었으나, 나는 setTimeout을 사용하였다. 

setTimeout을 사용해 alert창을 비동기적으로 실행하면, 

alert창이 띄워지기 전에 countDown 함수의 다른 부분이 계속 실행되면서 타이머도 정지하지 않게 된다. 

 

 

const showAlert = (message) => {
    setTimeout(function(){
        alert(message);
    }, 0);
}

 

 

이렇게 alert창을 띄우는 코드를 따로 빼 setTimeout을 사용해 alert을 0ms 뒤에 비동기적으로 실행하게 했다.

이렇게 하면 alert창이 띄워져도 타이머가 중지되지 않고 정상적으로 작동하게 된다.