Javascript setInterval, clearInterval 함수의 즉시 종료에 대한 고찰, 해결방법 사용법

Javascript setInterval, clearInterval 함수의 즉시 종료에 대한 고찰, 해결방법 사용법

 

JavaScript 에서 setInterval 함수는 기준 간격을 두고 주기적으로 이벤트를 발생 시키고 싶을 때 사용합니다.

 

예를 들어 1초마다 특정 함수를 실행시키고 싶다면 아래와 같이 사용합니다.

 

const timer = setInterval(function(){
    특정함수();
}, 1000);

 

 

기간은 milisecond 를 사용합니다.

 

그리고 중지하고 싶을 때는 clearInterval 함수를 사용합니다.

clearInterval 함수의 매개변수는 setInterval 함수가 리턴해주는 값을 사용합니다.

예로든 위의 반복을 중지하고 싶다면, 리턴받은 timer 값을 매개변수로 보내주면 됩니다.

 

clearInterval(timer);

 

하지만 즉시 종료를 원하는데도, setInterval 함수의 큐에 등록이 되었다면,

종료를 했음에도 불구하고 큐에 등록된 함수가 실행되는 결과를 보실 수 있습니다.

 

setInterval 함수 등록, 1초마다 특정함수 호출

->

2초 후 clearInterval 함수 실행 (즉시 종료를 원함)

->

특정함수 실행

 

원치않게 한번 혹의 두번의 특정함수가 더 실행되는 결과가 나타나게 됩니다.

이를 해결하는 방법을 찾아봤지만, 가장 간단하게 즉시종료(?!)를 하는 방법은 flag 를 사용하는 겁니다.

 

 

 

 

예를 들어 isPause라는 전역변수를 두고 isPause==false일 때만 실행되도록 하면 됩니다.

 

const GV = {
    isPause: false,
    timer: null
}

const startTimer = function(){
    GV.isPause = false;
    GV.timer = setInterval(function(){
        특정함수();
    }
}

const stopTimer = function(){
    clearInterval(GV.timer);
    GV.isPause = true;
}

const 특정함수 = function(){
    if(!GV.isPause){
        실행부..
    }
}

 

 

이렇게 구현을 하게 되면, setInterval에 등록된 큐에의해서 특정함수의 실행이 요청이 되어도

종료 시점에 isePause 변수를 true로 바꿔주기 때문에 특정함수의 로직은 실행이 되지 않습니다.

 

즉시 실행을 위해서는 setInterval 함수전에 원하는 함수를 실행시켜주면 됩니다.

 

const GV = {
    isPause: false,
    timer: null
}

const startTimer = function(){
    GV.isPause = false;
    특정함수();
    GV.timer = setInterval(function(){
        특정함수();
    }
}

 

Link : https://aljjabaegi.tistory.com/607

Javascript 특정 시간마다 반복 setInterval, setTimeout