[Javascript] setInterval 중복 실행 방지 - (setInterval, clearInterval)

Hangman 게임에 타이머 기능을 추가하면서, 재시작 버튼을 눌렀을 때 중복작동되는 오류를 해결하였다.

🚨 Error

첫 번째 턴에는 정상적으로 잘 작동하다가

두 번째 턴부터 타이머가 중복 실행되고 chanceIndex도 여러개씩 증가했다.

전에 eventListener를 제대로 remove 해주지 않아서 생긴 에러와 비슷했기 때문에 이번에도 clearInterval이 원인인 줄 알았다.

---

Cause

setInterval은 지정한 시간을 무한 루프 돌리게 된다.
무한 루프들이 중복되어 사이트가 느려지는 병목현상이 발생될 수 있다
이것을 방지하기 위해서 정확하게 한 변수에 setInterval을 정의하고 이 변수를 clearInterval해줘야한다.

Before Editing

함수 선언식으로 setInverval을 실행했다.

function timer() {
  sec -=1;
  if(sec === -1){
    chanceIndex++;
    sec = 20;
  }
setInterval(timer,1000);
  
(...)
clearInterval(timer);

After Editing

함수 표현식으로 setInverval을 실행했다.

const timer = setInterval(function(){
  sec -=1;
  if(sec === -1){
    chanceIndex++;
    sec = 20;
  }
},1000);

(...)
clearInterval(timer);

---

Result

setInverval을 실행할 때 중복을 방지하기 위해서

const 변수 = setInterval(function(){...}, seconds);
clearInterval(변수);

위와 같은 형식으로 실행하고 clearInterval 해줘야 한다.

수정한 코드로 실행했더니 타이머가 정상적으로 잘 작동했다 🥳

---

✏️ Link

👉 Play Hangman game!!