(JS) 함수의 즉시 종료

JavaScript 주기 함수 즉시 종료

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

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

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

기간은 milliesecond를 사용합니다.
함수를 중지하고 싶을 때는 clearInterval 함수를 사용합니다.
clearInterval 함수의 매개변수는 setInterval 함수가 리턴해주는 값을 사용합니다.
예로든 위의 반복을 중지하고 싶다면, 리턴받은 timer 값을 매개변수로 보내주면 됩니다.

clearInterval(timer);

하지만 즉시 종료를 원하는데도, setInterval 함수의 큐에 등록이 되었다면, 종료를 했음에도 불구하고 큐에 등록된 함수가 실행되는 결과를 볼 수 있습니다.

setInterval 함수 등록, 1초마다 특정함수 호출
->
2초후 clearInterval 함수 실행(즉서 종료를 원함)
->
특정함수 실행

원치않게 한번 혹은 두번의 특정함수가 더 실행되는 결과가 나타나게 됩니다. 이를 방지하기 위해 가장 간단하게 즉시 종료를 하는 방법은 flag를 사용하는 겁니다.

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

let isPuase = false;
let timer;

function startTimer(){
  isPuase = false;
  timer = setInterval(function(){
    	특정함수();
  }
}
                      
function stopTimer(){
    clearInterval(timer);
    isPause = true;
}
  
function 특정함수(){
  if(!isPause){
    실행부 ..
  }
}

이렇게 구현을 하게 되면, setInterval에 등록된 큐에 의해서 특정함수의 실행이 요청이 되어도 종료 시점에isPause 변수를 true로 바꿔주기 때문에 특정함수의 로직은 실행이 되지 않습니다.

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

let isPause = false;
let timer;

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