자바스크립트에서 디바운싱✨

브라우저 성능을 최적화하고 사용자 경험 결과물을 따라가기 위한 몇 가지 기술이 있으며 그 중 하나는 디바운싱입니다.

이것에 대한 아주 좋은 예는 검색창일 것입니다. 모든 문자와 함께 검색 창에 단어를 입력하면 새로운 추천 항목이 표시됩니다.

표면적으로 여기의 트릭은 누군가가 최신 입력에 따라 원하는 옵션을 가져오기 위해 문자를 입력할 때마다 API 호출을 해야 한다는 것입니다.

이를 수행하는 더 좋은 방법은 디바운싱을 통해

5초 또는 0.05초가 될 수 있는 기간 동안 threshold를 설정합니다.

이 임계값 타이머가 만료될 때마다 입력과 가장 일치하는 데이터를 가져오기 위해 API를 호출합니다.

타이머를 지우고 재설정하십시오.

암호:

<input
className="search-bar"
onChange={ hecticSearchHandler }
/>

function hecticSearchHandler(...args){

/* capture the search query entered by customer */
const { value } = args[0].target;

/* Make an API call with search query */
getSearchResults(value);
}

재사용 가능한 기능 코드:

const optiSearchHandler = debounceFunc(searchHandler, 500)

const debounceFunc = (func, delay) => {
   let timer;
    return function(...args) {
       const context = this;
       clearTimeOut(timer);
       timer = setTimeOut(() => {
           func.apply(context, args);
       }, delay)
     }
}

Watch this video for clarity: