9번 카드의 콜백 함수가 종료되고 호출 스택이 비면 5번 카드를 클릭할 때 등록되었던 0.5초 타이머의 콜백 함수가 실행됩니다. 여기서 clicked[0]과 clicked[1]인 2번과 5번 카드를 뒷면으로 뒤집고 clicked 배열을 비웁니다. clicked[2], clicked[3]에 있던 8번과 9번 카드는 앞면인 채로 남아 있게 됩니다.

정상적인 상황이라면 8번 카드가 clicked[0], 9번 카드가 clicked[1]에 들어가서 0.5초 타이머를 실행하게 되고, 0.5초 후에 8번 카드와 9번 카드가 뒷면으로 뒤집혀야 합니다. 그런데 지금은 8번 카드와 9번 카드가 clicked[2], clicked[3]에 등록됩니다. clicked.length가 4이므로 if (clicked.length !== 2)에서 return되어 타이머 또한 실행되지 않습니다.

문제를 파악했으니 해결해 보겠습니다. 카드를 뒷면으로 뒤집고 clicked를 비우기 전에 8번, 9번 카드의 클릭 이벤트에서 콜백 함수가 실행되는 것이 문제입니다. 사실 코드가 실행되는 순서는 정해져 있으므로 실행 자체를 막을 수는 없습니다. 그래서 실행되더라도 아무 일도 하지 않게 만들면 됩니다. 이를 위해 카드가 2장이 될 때 clickable을 false로 만듭니다. 그러면 세 번째 카드부터는 클릭해도 아무 일도 일어나지 않습니다. 그리고 clicked 배열을 비우고 나면 다시 클릭할 수 있게 clickable을 true로 만듭니다.