이는 버튼을 클릭할 때마다 각각 setTimeout() 타이머가 실행되기 때문입니다. 버튼을 클릭할 때 clearInterval()을 수행하므로 문제없다고 생각할 수도 있습니다. 하지만 버튼은 setInterval()을 멈추는 clearInterval()을 수행할 뿐 setTimeout()을 멈추는 clearTimeout()을 수행하지는 않습니다. 그래서 버튼을 누른 횟수만큼 setTimeout() 타이머가 실행되고 각각 1초 뒤에 setInterval()을 하게 되어 이미지가 매우 빠른 속도로 돌아가는 것입니다.

이 현상을 막으려면 이미지가 멈춘 동안 버튼을 클릭해도 clickButton() 함수가 호출되지 않게 해야 합니다. 또는 clickButton() 함수를 호출해도 아무 일도 일어나지 않게 하면 됩니다.

첫 번째는 removeEventListener() 메서드를 사용하는 방법입니다. 이미지가 멈춘 동안 버튼을 클릭해도 clickButton() 함수가 호출되지 않게 removeEventListener()로 태그에 등록한 click 이벤트를 잠깐 제거했다가 1초 뒤에 다시 연결합니다.