[Flutter] - API 호출 최적화를 위한 Throttle 기법

min_chan·2024년 12월 9일
0

Throttle을 사용한 이유

  • 버튼과 같은 이벤트를 통해 사용자와 서버 간의 빈번한 데이터 통신은 많이 발생한다.

  • 만약 동일한 이벤트에서 과도한 API 호출이 발생하는 경우, 불필요한 네트워크 트래픽 증가와 서버 과부하를 초래할 수 있다.

  • Throttle 기법은 특정 시간 간격 동안 한 번의 작업(예: API 호출)만 실행되도록 제한하는 기법으로 동일한 작업이 연속적으로 호출되지 않도록 하여 서버와 네트워크의 부하를 줄이기 위해 사용하였다.


Throttle

class Throttle {
  bool _isThrottled = false;

  void call(Future<void> Function() action, Duration duration) async {
    if (_isThrottled) return;
    _isThrottled = true;

    await action();

    Future.delayed(duration, () {
      _isThrottled = false;
    });
  }
}

final throttle = Throttle();

Button

GestureDetector(
  onTap: () {
    throttle.call(() async {
    	if (!isLike) {
        // 좋아요 api 호출
        } else {
        // 좋아요 해제 api 호출
        }
    }, Duration(seconds: 1));
  },
  child: FaIcon(
    isLike == false
        ? FontAwesomeIcons.heart
        : FontAwesomeIcons.solidHeart,
    size: MediaQuery.of(context).size.width > 600 ? 35 : 25,
    color: Colors.red,
  ),
);

0개의 댓글