23.01.31 Throttling & Debouncing

Throttling

• 짧은 시간 간격으로 연속해서 발생한 이벤트들을 일정시간 단위(delay)로 그룹화하여
  처음 또는 마지막 이벤트 핸들러만 호출되도록 하는 것

• e.g. 무한스크롤

Debouncing

출처: 자바스크립트 딥다이브

• 짧은 시간 간격으로 연속해서 이벤트가 발생하면 이벤트 핸들러를 호출하지 않다가 마지막 이벤트로부터 일정 시간(delay)이 경과한 후에 한 번만 호출하도록 하는 것

• e.g. 입력값 실시간 검색, 화면 resize 이벤트

메모리 누수(Memory Leak)

필요하지 않은 메모리를 계속 점유하고 있는 현상

코드 (리액트)

import { useEffect, useState } from "react";

type ControlDelay = (delay: number) => void;

export default function App() {
  let timer: NodeJS.Timeout | null = null;

  // Throttling
  const throttle: ControlDelay = (delay) => {
    if (timer) {
      return;
    }
    console.log(`${(delay/1000).toFixed(1)}초 동안 추가요청 안받음`);
    timer = setTimeout(() => {
      console.log(`${(delay/1000).toFixed(1)}초 지남 추가요청 받음`);
      timer = null;
    }, delay);
  };

  // Debouncing
  const debounce: ControlDelay = (delay) => {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      console.log(`마지막 요청으로부터 ${(delay/1000).toFixed(1)}초 지났으므로 실행`);
      timer = null;
    }, delay);
  };

  useEffect(() => {
    return () => {
      // 페이지 unmount 시 실행
      // 메모리 누수 방지
      if (timer) {
        clearTimeout(timer);
      }
    };
  }, [timer]);

  return (
    <div>
      <button onClick={() => throttle(1000)}>쓰로틀링</button>
      <button onClick={() => debounce(1000)}>디바운싱</button>
    </div>
  );
}

export default App;