자바스크립트 디바운싱✨

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

이에 대한 아주 좋은 예는 모든 검색 표시줄입니다. 모든 문자로 검색창에 단어를 입력하면 새로운 권장 사항이 표시됩니다.

표면적으로 볼 때 여기서 트릭은 누군가 최신 입력에 따라 원하는 옵션을 가져오기 위해 문자를 입력할 때마다 API 호출을 만드는 것임에 틀림없습니다.

이를 수행하는 더 좋은 방법은 디 바운싱을 사용하는 것입니다.

기간에 대해 threshold를 설정합니다. 5초 또는 0.05초가 될 수 있습니다.

이 임계값 타이머가 만료될 때마다 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: