자바스크립트에서 이벤트 처리 시간을 제한하는 것은 중요한 작업일 수 있습니다. 특히 UI 이벤트에 대한 응답 시간을 관리하는 경우에는 브라우저의 응답성을 향상시키는 데 도움이 될 수 있습니다.

1. setTimeout을 사용하여 시간 제한 설정하기

가장 간단한 방법은 setTimeout 함수를 사용하여 일정 시간이 지난 후에 원하는 동작을 수행하도록 설정하는 것입니다. 예를 들어, 3초 이내에 클릭을 처리하고, 그렇지 않으면 제한 시간이 초과된 것으로 간주하는 방법입니다.

let isClicked = false;

document.getElementById('myButton').addEventListener('click', function() {
  if (!isClicked) {
    isClicked = true;
    setTimeout(function() {
      isClicked = false;
    }, 3000);
    // 클릭 이벤트 처리 로직
  } else {
    // 이미 클릭 처리 중인 경우에 대한 로직
  }
});

2. 이벤트 핸들러를 삭제하여 시간 제한 설정하기

때로는 clearTimeout을 사용하여 setTimeout으로 설정한 제한 시간을 취소하는 방법을 사용할 수도 있습니다. 이러한 방법을 사용하면 이전의 이벤트 핸들러를 삭제하고 새로운 이벤트 핸들러를 추가함으로써 이벤트 처리를 제한할 수 있습니다.

let timeoutId;

document.getElementById('myButton').addEventListener('click', function() {
  if (timeoutId) {
    clearTimeout(timeoutId);
  }

  timeoutId = setTimeout(function() {
    timeoutId = null;
    // 클릭 이벤트 처리 로직
  }, 3000);
});

3. 제3자 라이브러리를 활용하여 시간 제한 설정하기

마지막으로, 제3자 라이브러리를 사용하여 이벤트 처리 시간을 제한할 수도 있습니다. 예를 들어, Lodash의 debounce 함수를 사용하면 특정 이벤트에 대한 연속 호출을 제한할 수 있습니다.

const onButtonClick = _.debounce(function() {
  // 클릭 이벤트 처리 로직
}, 3000);

document.getElementById('myButton').addEventListener('click', onButtonClick);

마무리

이러한 방법 중 하나를 사용하여 자바스크립트에서 이벤트 처리 시간을 제한할 수 있습니다. 적절한 방법을 선택하여 원하는 기능을 구현해보세요.

참조:

• MDN Web Docs: setTimeout
• MDN Web Docs: clearTimeout
• Lodash: Debounce