[TypeScript] 제스처로 대화하기. #2 - 탭(with. 지연 시간) 편

이번 편은 이전 편으로부터 이어집니다.

이전 편에서 정의했듯 탭은 짧은 시간에 눌렀다 떼는 동작을 말합니다. 여기서 짧은 시간은 어떻게 정의할까요? 정해진 표준은 없지만 일반적으로 1,000ms 이내의 시간을 말합니다. 그중에서도 500ms를 기본값으로 사용하는 경우가 많습니다. 시간 초과의 판단은 두 가지 방식을 생각할 수 있습니다.

1. 타이머를 사용하여 유효성을 즉시 판단합니다. pointerdown 시 setTimeout을 통해 취소 함수를 설정하는 방식으로 구현할 수 있습니다.

const cancel = setTimeout(() => {
    // ...
}, maxDelay - performance.now() + e.timeStamp);

element.addEventListener("pointerup", () => clearTimeout(cancel));

2. 판단을 pointerup 까지 유보하여 처리합니다. 즉, 타이머를 사용하여 도중에 작업을 취소하지 않고, 본래 탭이 발생하는 시점인 pointerup에서 처리합니다.

if(performance.now() - startTimestamp > maxDelay) {
    // ...

    return;
}

두 방식 모두 사용자가 느끼는 차이는 없습니다. 자유롭게 원하는 방식을 선택할 수 있습니다. 다만 첫 번째 방식의 경우, 약간의 오버헤드가 추가될 수 있습니다.

내용은 다음 편에서 이어집니다. 읽어주셔서 감사합니다!

묻고 답하기

개인적인 판단에 의해 적절하다고 여겨지는 경우, 모두가 볼 수 있도록 이곳에 문답이 추가됩니다. 그렇지 않더라도 질문에 대한 답변은 별도로 이루어집니다.