[JavaScript] 디바운싱, 쓰로틀링

haxwon·2022년 6월 28일
0

Javascript

목록 보기
1/1

✅ 디바운싱과 쓰로틀링

DOM Event 기반으로 실행되는 자바스크립트를 성능상의 이유 및 효율적으로 Event를 제어하는 프로그래밍 기법

📌 예시 코드 index.html

<input id="input" />
 ...
<script>
var timer;
    document.querySelector("#input").addEventListener("input", function (e) {
      console.log(`요청: ${e.target.value}`);
    });
</script>

디바운싱과 쓰로틀링을 사용하지 않았을 경우

위와 같은 낭비가 발생하게 됨
예를 들어 유료 API를 사용하는 경우, 11번의 쿼리를 낭비하는 셈


🟢 디바운싱(Debouncing): 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것
❓ 사용 예시: 검색어 자동완성, 브라우저 리사이징 등

<script>
var timer;
    document.querySelector("#input").addEventListener("input", function (e) {
        //500ms 동안 입력이 없으면 입력이 끝난 것으로 간주
      if (timer) {
          clearTimeout(timer);
        }
        timer = setTimeout(function () {
            console.log(`요청: ${e.target.value}`);
        }, 500);
    });
</script> 


🟢 쓰로틀링(Throttling): 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것
❓ 사용 예시: 자동완성 및 스크롤 이벤트 등

  <script>
    var timer;
    document.querySelector("#input").addEventListener("input", function (e) {
      if (!timer) {
        timer = setTimeout(function () {
          timer = null;
          console.log(`요청: ${e.target.value}`);
        }, 500);
      }
    });
  </script>


🎈 참조

https://www.zerocho.com/category/JavaScript/post/59a8e9cb15ac0000182794fa

profile
그냥 하는 프론트엔드 개발자

0개의 댓글