10.5
성급한 클릭 막기
반응속도 테스트를 하다 보면 예측 클릭을 해서 측정 화면(초록색)으로 바뀌기 전에 준비 화면(빨간색)에서 클릭할 때가 있습니다. 성급하게 클릭한 경우죠. 이럴 때는 측정 화면으로 넘어가는 타이머를 멈추고(①) 대기 화면(파란색)으로 보내고(②) 사용자에게 안내 메시지를 띄워(③) 다시 클릭하게 합니다.
여기까지 반영한 전체 코드는 다음과 같습니다.
const $screen = document.querySelector('#screen');
const $result = document.querySelector('#result');
let startTime;
let endTime;
const records = [];
let timeoutId;
$screen.addEventListener('click', function () {
if ($screen.classList.contains('waiting')) { // 대기 화면
$screen.classList.replace('waiting', 'ready');
$screen.textContent = '초록색이 되면 클릭하세요';