debounce & throttle

어떤 족보 탐색 코드를 분석하다가 'debounce'라는 함수가 등장하길래 검색해봄

const sendSearchTerm = debounce((searchTerm) => {
    if (ws.readyState === WebSocket.OPEN && selectedFile) {
      if (!searchTerm) {
        resultsDiv.innerHTML = INITIAL_SCREEN_HTML;
        return;
      }

      // GA 이벤트 전송 추가
      gtag("event", "search", {
        event_category: "Search",
        event_label: selectedFile,
        search_term: searchTerm,
      });

      ws.send(
        JSON.stringify({
          type: "search",
          query: searchTerm,
          selectedFile: selectedFile,
          delimiter: delimiterSelect.value,
          caseSensitive: caseSensitiveCheckbox.checked,
          ignoreSpaces: ignoreSpacesCheckbox.checked,
        })
      );
    }
}, 300);

 

debounce? 뭐지? 자스 내장 메서드인가? 찾아봤더니 내장 메서드는 아니고, 일종의 '기법'이었다.

 

 

---

debounce()

JavaScript에서 debounce(디바운스)는 유저가 입력할 때마다 코드를 오직 한 번씩만 실행되도록 해주는 함수입니다.

 

방문자가 타이핑을 끝내고 난 뒤에만 검색 질의(query)에 대한 제안 옵션을 보여주고 싶다고 해봅시다.

아니면 양식의 내용을 저장하고자 하지만, 매번 '저장'이 발생한다면 데이터베이스를 거쳐야 하니, 사용자가 해당 내용을 적극적으로 변경하지 않을 때만 이를 하고 싶다고 해봅시다.

 

debounce는 특별한 함수로, 아래 두 가지 일을 처리합니다.

• timer 값의 스코프(scope)를 할당하고
• 함수가 지정된 시간에 작동되도록 스케줄링합니다.

---

 

위 정보를 기반으로 코드를 보면, sendSearchTerm 함수는 debounce를 적용하여 디바운싱할 기능들을 그 안에서 호출하고 있고, 이 기능들은 sendSearchTerm 함수가 호출되고 300밀리세컨드가 지난 후에야 실행된다. 300밀리세컨드 사이에 일어난 n번의 sendSearchTerm 함수 호출들을 무시하고, 마지막 한 번의 호출만 하는 것이다.

 

시사점

이러한 debounce를 사용하면, 모든 입력에 일일이 대응했을 때 발생하는 과도한 쿼리 비용을 방지하여 앱이 훨씬 효율적으로 작동할 수 있다.

 

 

출처

https://www.freecodecamp.org/korean/news/debounce-dibaunseu-javascripteseo-hamsureul-jiyeonsikineun-bangbeob-js-es6-yeje/

Debounce(디바운스) - JavaScript에서 함수를 지연시키는 방법 (JS ES6 예제)

ㄴ 디바운스의 어원에 대해서도 나와있다.

 

 

---

throttle

https://velog.io/@seoyaon/Javascript-%EB%94%94%EB%B0%94%EC%9A%B4%EC%8B%B1debouncing%EA%B3%BC-%EC%93%B0%EB%A1%9C%ED%8B%80%EB%A7%81throttling

[Javascript] 디바운싱(debouncing)과 쓰로틀링(throttling)

throttle에 대한 정리는 여기서 디바운싱과 비교하여 매우 잘 정리되어 있다.

간단히 옮겨 적자면...

 

즉 쓰로틀링은 연이어 호출되는 함수들 중에서 첫 번째 함수만을 호출하여 주어진 시간동안 후속 이벤트를 무시하는 것이고,
디바운싱은 연이어 호출되는 함수들 중에서 이전 이벤트를 무시하고 마지막 함수만을 호출하는 것입니다.

쓰로틀링은 스크롤 이벤트에 자주 쓰이고, 디바운싱은 주로 ajax 검색에 자주 쓰인다고 하네요.