드본

dboun 함수는 함수가 실행되는 속도를 제한하도록 설계된 유틸리티입니다. 이는 마지막 호출 이후 지정된 지연(delay)이 경과한 후에만 제공된 함수(fn)가 호출되도록 보장합니다. 기본적으로 지연 시간은 400밀리초로 설정되어 있습니다.

제공된 함수가 과도하게 호출되는 것을 방지하여 크기 조정, 스크롤, 입력 등 자주 발생하는 이벤트를 처리하는 데 특히 유용합니다.

사용예

시나리오: 디바운스를 사용한 입력 검색

// Define the function to handle search
function handleSearch(query: string): void {
    console.log("Searching for:", query);
}

// Create a debounced version of the search handler
const debouncedSearch = dboun(handleSearch, 300);

// Simulate typing in a search box
const input = document.querySelector('#searchBox');
input?.addEventListener('input', (event: Event) => {
    const target = event.target as HTMLInputElement;
    debouncedSearch(target.value);
});

이 예에서는:

• handlerSearch는 검색 로직을 처리하는 함수입니다.
• debouncedSearch는 입력이 300밀리초 동안 활동하지 않은 후에만 handlerSearch가 실행되도록 보장합니다.

매개변수

1. fn (함수) : 디바운스 지연 후 실행되는 함수

   • 지정된 지연 후에 호출되는 콜백 함수입니다.

2. delay(숫자, 선택 사항): fn을 호출하기 전에 대기할 시간(밀리초)입니다. 기본값은 400밀리초입니다.

   • 디바운스 간격을 결정합니다.

보고

dboun 함수는 fn의 새로운 디바운스 버전을 반환합니다. 반환된 함수는 반환된 함수가 마지막으로 호출된 이후 지연 밀리초가 지날 때까지 fn 호출을 지연합니다.

작동 방식

• 반환된 함수가 호출되면 해당 함수에 설정된 기존 타이머(clearTimeout(timeout))가 모두 지워집니다.
• 그런 다음 지정된 지연 후에 fn을 호출하도록 새 타이머가 설정됩니다(setTimeout).
• 지연 시간이 끝나기 전에 반환된 함수를 다시 호출하면 이전 타이머가 지워지고 재설정됩니다.

실제 응용

1. 입력 처리: 디바운싱은 사용자가 입력 필드에 입력할 때 이벤트 핸들러의 과도한 실행을 방지합니다.
2. 크기 조정 이벤트: 창 크기 조정 이벤트 핸들러를 디바운싱하여 성능을 관리합니다.
3. 스크롤 이벤트: 스크롤 이벤트 핸들러 실행 빈도를 제어하여 성능 병목 현상을 방지합니다.

메모

• 지연(스로틀과 같은 동작)이 뒤따르는 즉각적인 실행이 필요한 경우 이 함수는 기본적으로 해당 기능을 제공하지 않습니다.
• 응답성과 성능의 균형을 맞추기 위해 항상 지연이 사용 사례에 적합한지 확인하세요.

브라우저 호환성

dboun 함수는 최신 JavaScript/TypeScript 기능을 사용하므로 대부분의 최신 환경과 호환됩니다. 이전 환경의 경우 코드 트랜스파일을 고려하세요.

테스트

// Test debounced function
const log = dboun((message: string) => console.log(message), 500);
log("Hello"); // Will not log immediately
log("Hello again"); // Resets the timer; only this message will log after 500ms

위 내용은 드본의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!