JS - 디바운싱

디바운싱

---

디바운싱에 대한 예제를 구현한다

디바운싱의 적용 예는 검색인데 사용자가 검색어를 입력할 때 검색창 밑에 연관검색어를 나열해준다.

이 때 이벤트는 각 글자당 계속 발생하기 때문에 서버에 요청도 같은 숫자로 계속 전해진다.

사과하나를 치는데 이벤트가 ㅅ ㅏ ㄱ ㅗ ㅏ , 총 5번이 일어나므로 한 두명이 아닌 수천명이면 고작 두글자에 몇만번이상의 요청을 보내게 된다.

그래서 연이어 호출되는 이벤트중 마지막 이벤트만 호출하도록 하는 것이 디바운싱이다.

    $searchInput.addEventListener("keyup", (e) => {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        if (e.keyCode === 13) {
          onSearch(e.target.value);
          this.setState(e.target.value);
        }
      }, 200);
    });

과제중 구현한 디바운싱 예제.

200ms 이 후 마지막 검색이벤트만 호출된다.