[리액트 React] 쓰로틀링, 디바운싱_1 (Throttling & Debouncing)

Throttling

• 짧은 시간 간격으로 연속해서 발생한 이벤트들을 일정시간 단위(delay)로 그룹화하여 처음 또는 마지막 이벤트 핸들러만 호출되도록 하는 것. 최초, 마지막 이벤트만 실행
• 1. timerId의 초기값은 null 이다.
• 2. 버튼 클릭 시 throttle함수 내부로 들어가 timerId값이 있으면 함수 종료
• 3. 할당된 값이 없으면 setTimeout함수로 들어가 delay(버튼 클릭 시 인자로 전달되는 2초) 이후 내부 로직이 실행된다(추가요청 안 받아요 콘솔)
• 4. 버튼을 여러 번 클릭해도 첫 이벤트 실행 시 바로 종료되어 버리기 때문에 클릭 종료 후 2초 뒤 로직이 실행된다(추가요청받아요 콘솔)

  let timerId = null;

  const throttle = (delay) => {
    // timerId가 있으면 함수 종료
    if (timerId) {
      return;
    }
    console.log(`API요청 실패 ${delay}ms 동안 추가 요청은 안받습니다.`);
    timerId = setTimeout(() => {
      console.log(`${delay}ms 지남, 추가 요청 받습니다.`);
      timerId = null;
    }, delay);
  };

  return (
    <div
      style={{
        paddingLeft: 20,
        paddingRight: 20,
      }}
    >
      <h1>Button 이벤트 예제</h1>
      <button onClick={() => throttle(2000)}>쓰로틀링 버튼</button>

 

Debouncing

• 짧은 시간 간격으로 연속해서 이벤트가 발생하면 이벤트 핸들러를 호출하지 않다가 마지막 이벤트로부터 일정 시간(delay)이 경과한 후에 한 번만 호출하도록 하는 것. 반복적인 이벤트 후, delay가 지나면 이벤트 실행
• 1. timerId의 초기값은 null이다.
• 2. 버튼 클릭 시 debounce함수 내부로 들어가 timerId값이 있다면 할당된 값을 지운다
• 3. 할당된 값이 없으면 setTimeout함수로 들어가 delay(버튼 클릭 시 인자로 전달되는 2초) 이후 내부 로직을 실행한다
• 4. 버튼을 여러 번 클릭해도  debounce함수 내부에서 할당된 타이머를 지워주기 때문에 클릭 종료 후 2초 뒤 로직이 실행된다(요청 실패 콘솔)

 let timerId = null;

  const debounce = (delay) => {
    if (timerId) {
      // timerId에 할당되어있는 타이머 제거
      clearTimeout(timerId);
    }
    // 기존 타이머를 지우고 새 값을 할당함
    timerId = setTimeout(() => {
      console.log(`마지막 요청으로부터 ${delay}ms 지났으므로 API요청 실패`);
      timerId = null;
    }, delay);
  };

  return (
    <div
      style={{
        paddingLeft: 20,
        paddingRight: 20,
      }}
    >
      <h1>Button 이벤트 예제</h1>
      <button onClick={() => debounce(2000)}>디바운싱 버튼</button>