[html, javascript] 동일한 setInterval 반복 호출 막기

javascript에는 함수를 반복해서 수행시키는 기능이 있는데

requestAnimationFrame 과 setInterval 이 있다.

 

requestAnimationFrame은 60 프레임 고정으로 프레임당 반복 호출이고

setInterval 은 사용자가 반복 호출하는 주기를 선택할 수 있다.

 

필자는 for문으로 캔버스에 여러 물체가 움직이도록 했는데 움직이는 스피드를 1로 해도 requestAnimationFrame 으로는 너무 빨랐다.

 

좀 더 느리게 하기위해 setInterval 을 사용해서 물체를 움직이는 함수의 호출 주기를 50ms 로 설정했다.

 

미니게임을 완료할 때 ReStart 버튼을 생성시켜 키보드 F5를 눌러 새로고침하지 않아도 미니게임을 다시 실행시킬 수 있도록 했다.

 

그런데 setInterval 의 호출 주기가 점점 빨라지는게 아닌가? => 물체 움직임이 점점 빨라진다.

 

ReStart 버튼 생성시킬때 clearInterval 을 했음에도 해당 증상이 나타났다.

 

해결 방법은 requestAnimationFrame 의 호출과 비슷하게 진행하면 된다.

 

// 전역변수로 선언
let interval;

// 함수 주기적 호출 실행
interval = setInterval(함수이름, 호출주기);

// 반복 실행 중지
clearInterval(interval);

이렇게 requestAnimationFrame 과 비슷하게 변수로 할당하여 실행하면 몇 번이든 미니게임을 반복실행해도 setInterval 이 망가지지 않는다.