웹 개발의 조절 및 디바운싱-JS 튜토리얼-php.cn

웹 개발의 조절 및 디바운싱

Susan Sarandon

풀어 주다： 2024-11-01 17:14:30

원래의

661명이 탐색했습니다.

Throttling and Debouncing in Web Development

스크롤, 크기 조정, 입력과 같은 이벤트는 기능을 반복적으로 실행하는 경우가 많으며 때로는 몇 초 내에 수백 번 실행되기도 합니다. 사용자가 입력할 때 서버에서 제안을 가져오는 검색 창이나 브라우저 창이 변경됨에 따라 레이아웃을 지속적으로 조정하는 크기 조정 핸들러를 상상해 보세요. 제어하지 않으면 이러한 기능은 브라우저에 과부하를 주고, 사용자 경험을 저하시키며, 과도한 API 요청으로 인해 서버 비용을 증가시킬 수도 있습니다.

여기서 스로틀링과 디바운싱이 작용합니다. 이 두 가지 기술은 빈번한 이벤트에 대한 응답으로 함수가 실행되는 빈도를 관리하여 애플리케이션을 더 원활하고 효율적이며 반응적으로 만드는 데 도움이 됩니다. 이 가이드에서는 이러한 개념을 살펴보고, 차이점을 검토하고, 특정 사용 사례에서 각 개념이 어떻게 성능을 최적화할 수 있는지 알아봅니다.

제한 및 디바운싱 이해

조절은 트리거 이벤트가 발생하는 빈도에 관계없이 함수 실행을 위해 제어되고 정기적인 간격을 적용하는 기술입니다. 제한 기능은 지정된 기간 동안 호출을 제한함으로써 이벤트가 자주 발생하는 대신 함수가 예측 가능하게(꾸준하고 일관되게) 호출되도록 보장합니다. 이는 시스템에 부담을 주지 않으면서 정기적인 기능 실행이 사용자 경험을 향상시키는 경우에 이상적입니다.

반면 디바운싱은 더 이상 이벤트를 트리거하지 않고 설정된 기간이 지날 때까지 함수 실행을 지연합니다. 기본적으로 함수를 호출하기 전에 활동이 "일시 중지"될 때까지 기다리므로 사용자 활동이 가라앉은 후에만 작업이 발생해야 하는 상황에서 유용합니다. 예를 들어 검색 필드에서 API 호출을 하기 전에 사용자가 입력을 마칠 때까지 기다리면 불필요한 요청을 방지하고 성능을 최적화할 수 있습니다.

주요 특징

스로틀링의 주요 특징

실행 빈도: 제한은 최대 실행 속도를 적용합니다. 예를 들어, 창 크기 조정과 같이 이벤트가 지속적으로 트리거되는 경우 제한을 통해 기능이 정의된 간격마다 한 번만 실행되도록 합니다.
일관적인 속도: 이 기술은 꾸준하고 제어된 실행 속도를 유지하여 과도한 함수 호출 수를 방지하고 함수 동작의 예측 가능성을 허용합니다.

디바운싱의 주요 특징

지연 기반 실행: 마지막 이벤트 이후 특정 지연 후에만 함수가 실행되어 과도한 실행을 방지하는 데 도움이 됩니다.
이벤트 중지 후 단일 실행: 이벤트가 계속되면 함수 호출이 반복적으로 지연되고 활동이 중지된 후에만 실행됩니다. 사용자가 입력과 같은 작업을 완료한 후에만 작업이 발생해야 하는 입력에 적합합니다.

조절 및 디바운싱 사용 사례

이러한 기술은 다양한 시나리오에서 빛을 발합니다.

제한 사용 사례:
- 스크롤 이벤트: 조절은 다음에 의해 트리거되는 작업에 효과적입니다. 콘텐츠 로딩과 같은 스크롤링(예: 예상 가능) 인터페이스에 부담을 주지 않고 계속해서 말이죠.
- 크기 조정 이벤트: 창 크기 조정으로 인해 자주 발생하는 호출은 다음과 같습니다. 스로틀링으로 제어되므로 간격을 두고 조정할 수 있습니다. 크기 조정이 매번 변경되는 것이 아니라
디바운싱 사용 사례:
- 검색 입력: 검색 필드의 경우 디바운싱을 통해 불필요한 것을 방지합니다. 사용자가 입력을 멈출 때까지 기다리는 API 요청만 일정 기간 동안 활동이 없으면 실행됩니다.
- 크기 조정 이벤트: 조절과 유사하게 크기 조정 이벤트를 디바운싱하는 것은 레이아웃 조정이 한 번만 발생하도록 하는 데 도움이 됩니다. 크기 조정이 완료되었습니다.

실제 사례

JavaScript의 제한
기능 실행 빈도를 제한하기 위해 조절을 구현하는 방법은 다음과 같습니다.

function throttle(func, delay) {
  let lastCall = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastCall >= delay) {
      func(...args);
      lastCall = now;
    }
  };
}

const throttledScrollHandler = throttle(() => {
  console.log("Handling scroll event...");
}, 1000);

window.addEventListener("scroll", throttledScrollHandler);

로그인 후 복사

이 예에서 throttle 함수는 사용자가 빠르게 스크롤하더라도 throttledScrollHandler가 1000밀리초(1초)마다 한 번만 호출되도록 보장합니다. 이렇게 하면 시스템 리소스가 절약되고 사용자 경험이 원활해집니다.

JavaScript에서 디바운싱
디바운싱의 경우 이벤트가 중단될 때까지 함수 실행을 지연하는 방법은 다음과 같습니다.

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

const debouncedSearch = debounce((query) => {
  console.log(`Searching for: ${query}`);
}, 300);

const searchInput = document.getElementById("search-input");
searchInput.addEventListener("input", (event) => {
  debouncedSearch(event.target.value);
});

로그인 후 복사

이 경우 debouncedSearch 함수는 입력이 중지된 후 300밀리초 동안만 실행됩니다. 키를 누를 때마다 지연 타이머가 재설정되므로 이 기능은 사용자가 입력을 마칠 때까지 기다리므로 성능과 사용자 경험이 모두 최적화됩니다.