가위바위보 강의를 보면서 질문이 있습니다.

안녕하세요 제로초님 강의 잘 듣고 있습니다.

가위바위보 강의를 들으면서 코드를 직접 쳐보고 테스트를 해보았는데, 해결되지 않는 부분이 있어서 질문드립니다.

가위,바위,보 버튼을 누를 때 clearInterval을 시키고 1초 딜레이 이후에 인터벌을 다시 실행하는 코드에서 (아래는 깃허브에 제로초님 코드를 가져왔습니다.)

var 인터벌;
function 인터벌메이커() {
  인터벌 = setInterval(function () {
    if (이미지좌표 === 가위바위보.바위) {
      이미지좌표 = 가위바위보.가위;
    } else if (이미지좌표 === 가위바위보.가위) {
      이미지좌표 = 가위바위보.보;
    } else {
      이미지좌표 = 가위바위보.바위;
    }
    document.querySelector('#computer').style.background =
      'url(https://en.pimg.jp/023/182/267/1/23182267.jpg) ' + 이미지좌표 + ' 0';
  }, 100);
}

인터벌메이커();

document.querySelectorAll('.btn').forEach(function(btn) {
 btn.addEventListener('click', function() {
   clearInterval(인터벌); // setInterval 중지
   setTimeout(function() {
     인터벌메이커();
   }, 1000);
  });
});

이렇게 되어있는데 가위,바위,보 버튼을 연속적으로 빠르게 누르다 보면 인터벌메이커() 함수가 중첩으로 실행이 되어서 결국에는 1초 딜레이 무효화되는 현상을 보게 되었는데 어떻게 하면 제대로 구현할 수 있을지 여쭤봅니다.

제 생각에는 clearInterval 메소드 안에 setTimeout을 넣어봐서 실행하면 되지 않을까 했는데(아래 코드 처럼)

document.querySelectorAll('.btn').forEach(function(btn) {
 btn.addEventListener('click', function() {
   clearInterval(인터벌, setTimeout(function(){
      인터벌메이커();
   }, 1000)); 
});

여전히 안되더라구요