Throttling 알아보기 ( 성능 최적화 기법 )

 

 

Throttling은 성능 최적화를 위한 프로그래밍 기법이며

이벤트나 함수 호출의 횟수를 제어하는데 사용됨 비슷한 기법으로 debouncing이 있음(내일 써야지 ㅎㅋ)

 

Throttling (쓰로틀링)

일정 시간 동안 함수가 한 번만 실행되도록 제한하는 기법

특징

• 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 함
• 정해진 시간 간격으로 함수를 실행
• 사용 예시: 스크롤 이벤트, 무한 스크롤, 실시간 데이터 갱신, API 요청 제한

export function throttle<T extends (...args: any[]) => any>(
  func: T,
  delay: number
): (...args: Parameters<T>) => void {
  let isThrottled = false;

  return (...args: Parameters<T>) => {
    if (!isThrottled) {
      func.apply(this, args);
      isThrottled = true;

      setTimeout(() => {
        isThrottled = false;
      }, delay);
    }
  };
}

 

매개 변수

• func: 쓰로틀링을 적용할 원본 함수
• delay: 쓰로틀링 시간 간격

제네릭 타입

• T는 타입 파라미터
• extends는 T가 특정 타입을 확장/제한함을 의미
• (...args: any[]) => any는 함수 타입을 의미
  • ...args: any[] : 어떤 타입의 매개변수든 받을 수 있음
  • => any : 어떤 타입이든 반환할 수 있음
• 즉 T는 어떤 형태의 함수든 될 수 있다는 의미

클로저 활용

let isThrottled = false;  // 외부 변수

return (...args: Parameters<T>) => {  // 내부 함수
  // 이 함수는 isThrottled 변수를 기억하고 접근
}

• 클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합임
• isThrottled 변수는 외부 함수(throttle)의 스코프에 있음
• 반환되는 내부 함수는 외부 스코프의 isThrottled에 접근 가능
• 이를 통해 쓰로틀링 상태를 유지하고 관리할 수 있음

 

Parameters 유틸리티 타입

 

• Parameters<T>는 TypeScript의 유틸리티 타입
• 함수 T의 매개변수 타입을 추출

 

apply 메서드와 this 바인딩

func.apply(this, args)

 

• apply는 함수를 호출하는 메서드
• 첫 번째 인자로 this 컨텍스트 전달
• 두 번째 인자로 매개변수 배열 전달
• this를 바인딩하여 원본 함수의 컨텍스트 유지

 

setTimeout과 비동기 처리

setTimeout(() => {
  isThrottled = false;
}, delay);

 

• 비동기적으로 실행되는 타이머 설정
• delay 시간 후에 쓰로틀 상태 해제
• 이벤트 루프와 관련된 비동기 처리

 

실행 예시

// 예시: 1초 쓰로틀링
const throttledFunc = throttle(() => console.log('실행!'), 1000);

// 연속 호출시
throttledFunc(); // 실행!
throttledFunc(); // (무시)
throttledFunc(); // (무시)
// ... 1초 후
throttledFunc(); // 실행!

 

따라서 위 내용대로 요약해보면..

함수 호출의 빈도를 제한하여 일정 시간 동안 한 번만 실행되도록 보장하고

클로저라는 것을 활용해 isThrottled 상태를 관리하며 이 상태값으로 함수 실행 여부를 결정

그 다음 setTimeout으로 delay 시간이 지난 후

다시 실행 가능한 상태(isThrottled = false)로 변경하여 Throtling을 적용!!

 

 

그렇다면 클로저와 렉시컬 환경 그리고 apply 메서드를 사용할 때 this 바인딩이란 무엇인지 알아 봐야겠음..

 

렉시컬 환경과 클로저란?

 

https://0723-0725.tistory.com/96

렉시컬 환경과 클로저

 

 

 

그럼 마지막으로 this 바인딩이란..?

 

this 바인딩

• JavaScript에서 this는 함수가 어떻게 호출되었는지에 따라 달라지는 실행 컨텍스트
• apply, call, bind 메서드를 통해 this가 가리키는 대상을 명시적으로 지정 가능

const user = {
  name: '김코딩',
  greet() {
    console.log(`안녕하세요, ${this.name}입니다!`);
  }
};

// 일반 호출: this는 user를 가리킴
user.greet();  // "안녕하세요, 김코딩입니다!"

// 다른 컨텍스트에서 호출
const greetFn = user.greet;
greetFn();  // "안녕하세요, undefined입니다!" (this가 window나 global을 가리킴)

// apply로 this 바인딩
greetFn.apply(user);  // "안녕하세요, 김코딩입니다!" (this를 user로 지정)

 

사실 내 블로그에 this 바인딩을 정리한 적이 있기 때문에

밑에 게시글을 보고 다시 한 번 상기시켜 보려고요.. 보다가

이해 안가면 this 바인딩에 대해서 다시 정리해야겠어요 그럼 일단 오늘은 끝!

 

https://0723-0725.tistory.com/33

자바스크립트에서 this란

https://0723-0725.tistory.com/40

`JavaScript` 에서 명시적 `This binding`을 제공하는 `3가지 메소드` ( call, apply, bind)