앞에서 두더지가 올라왔다가 내려가는 데 총 2초가 걸린다고 했습니다. tick() 함수는 1초마다 호출되는데, tick() 함수 내부에도 1초 타이머가 있습니다. tick() 함수가 실행된 지 1초가 지나고 다음 tick() 함수가 호출될 때 이전 tick() 함수의 내부의 타이머도 실행됩니다. 이렇게 동시에 여러 타이머가 실행되어 발생하는 문제입니다.

이 문제를 이벤트 루프로 분석해 보겠습니다. 9개 구멍에서 발생하는 이벤트를 모두 분석하면 복잡하니 한 구멍만 분석하겠습니다. 각 이벤트가 서로 영향을 미치지 않는다면 전부 분석할 필요는 없습니다.

다음 그림은 첫 번째 tick() 함수가 실행되는 상황입니다. tick() 함수 내부에서 forEach() 메서드가 실행되고 그 안에서 다시 hidden 클래스를 제거하는 remove() 메서드가 실행됩니다. hidden 클래스가 제거됐으므로 두더지가 구멍에서 올라옵니다. 이때 백그라운드에는 1초마다 tick() 함수를 호출하는 setInterval()과 첫 번째 tick() 함수에서 등록한 1초 타이머가 들어 있습니다.