JS에서의 디바운싱: 더 나은 웹 앱 구축-JS 튜토리얼-php.cn

JS에서의 디바운싱: 더 나은 웹 앱 구축

Susan Sarandon

풀어 주다： 2024-12-06 19:56:11

원래의

316명이 탐색했습니다.

Debouncing in JS: Building better web apps

웹사이트에 접속하여 검색창에 입력했을 때 지연 없이 실시간으로 제안 사항이 나타나는 것을 본 적이 있습니까? 또는 양식을 작성했는데 입력하는 순간 "이미 사용 중인 사용자 이름"이라는 메시지가 나타나는 것을 본 적이 있을 수도 있습니다. 이러한 원활한 경험 뒤에는 현대 웹 개발의 강력하면서도 종종 알려지지 않은 영웅이 있습니다: 디바운싱.

디바운싱이란 무엇입니까?

디바운싱은 지정된 비활성 기간 이후에만 기능이 실행되도록 보장하는 프로그래밍 기술입니다. 검색창에 입력하고 있다고 상상해 보세요. 디바운싱이 없으면 모든 키 입력이 함수 호출을 트리거하여 잠재적으로 중복 요청으로 시스템을 압도하게 됩니다. 디바운싱은 기능을 실행하기 전에 입력이 잠시 멈출 때까지 기다려 하나의 요청만 전송되도록 하여 이 문제를 해결합니다.

어떻게 작동하나요?

핵심은 함수 실행 빈도를 제어하는 것입니다. 하지만 더 쉽게 이해하기 위해 초인종을 예로 들어 보겠습니다. 3초 동안 활동이 없으면 벨이 울리는 도어 맥주가 있다고 가정해 보겠습니다. 최초 벨이 울린 후 사용자가 벨을 여러 번 울리려고 하면 3초를 더 넘기지 않는 한 벨이 울리지 않습니다.

JavaScript에서 디바운싱은 일반적으로 입력, 스크롤 또는 크기 조정과 같은 이벤트 리스너와 함께 사용됩니다. 기본 구현은 다음과 같습니다.

function debounce(callback, delay) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      callback(...args);
    }, delay);
  };
}

로그인 후 복사

이 코드의 다양한 요소를 이해해 보겠습니다.

debounce: 주어진 함수의 디바운스 버전을 생성하고 반환하는 기본 함수입니다.
콜백: 디바운싱된 지연 후에 실행될 함수입니다.
지연: 콜백을 실행하기 전에 함수가 마지막 이벤트 이후 기다려야 하는 시간(밀리초)입니다.
timeoutId는 setTimeout에 의해 생성된 타이머의 식별자를 보유하도록 정의됩니다. 이를 통해 새 타이머를 시작하기 전에 진행 중인 타이머를 모두 지워 불필요하거나 반복되는 기능 실행을 방지할 수 있습니다.
ClearTimeout은 timeoutId와 연결된 기존 타이머를 취소합니다.

실제 사용 사례

입력 필드 검색: 실시간 검색은 디바운싱의 전형적인 사용 사례입니다. 이것이 없으면 모든 키 입력이 데이터베이스 쿼리를 실행하여 서버를 압도할 수 있습니다. 디바운싱을 사용하면 사용자가 입력을 중단한 후에만 함수가 호출되므로 서버 부하가 줄어들고 성능이 향상됩니다.

function debounce(callback, delay) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      callback(...args);
    }, delay);
  };
}

로그인 후 복사

양식 확인: 양식에 대한 즉각적인 피드백은 훌륭하지만 모든 키 입력에 대한 입력을 확인하려면 리소스가 많이 소모될 수 있습니다. 디바운싱을 사용하면 사용자가 입력을 멈출 때까지 유효성 검사를 지연할 수 있습니다.

const handleSearch = debounce((query) => {
  fetch(`https://api.example.com/search?q=${query}`)
    .then((response) => response.json())
    .then((data) => console.log(data));
}, 500);

document.getElementById("search").addEventListener("input", (e) => {
  handleSearch(e.target.value);
});

로그인 후 복사