7-2. Throttle 실습

Throttle 적용 예시

무한 페이지 스크롤 부분에 적용 (throttle 사용)

throttle을 사용하여 페이지 스크롤링을 구현랄때에는 스크롤 이벤트가 발생할때마다 스크롤 위치를 업데이트 하는 것이 아니라, 스크롤 이벤트를 지정된 지연 시간 동안 취소하고 마지막 스크롤 위치만 업데이트 하는 함수를 작성하여야 한다.

 

import 'dart:async';
import 'package:flutter/widgets.dart';

typedef void ThrottleCallback();

/// 지정된 시간 간격으로 콜백함수 생성
class Throttler {
  final Duration delay;
  ThrottleCallback? callback;
  Timer? _timer;

  Throttler({required this.delay});

  void runThrottle(ThrottleCallback cb) {
    callback = cb;
    if (_timer == null) {
      callback!();
      _timer = Timer(delay, () {
        _timer = null;
        if (callback != null) {
          callback!();
        }
      });
    }
  }
}

/// 스크롤링 이벤트 처리
class ScrollThrottler {
  static final Throttler _throttle = Throttler(delay: Duration(milliseconds: 50));
  static ScrollController? _scrollController;

  /// attachScrollController 메서드를 이용하여, ScrollController 등록
  /// scrollThrottle 메서드를 사용하여 스크롤링 이벤트 처리
  static void attachScrollController(ScrollController controller) {
    _scrollController = controller;
  }

  /// Throttler 클래스의 runThrottle 메서드를 호출하여 콜백 함수 실행
  static void scrollThrottle() {
    _throttle.runThrottle(() {
      if (_scrollController != null) {
        // perform scrolling action here
      }
    });
  }
}

이 코드는 Throttler 클래스와 Scrollthrottler 클래스를 정의한다. Throttler 클래스는 지정된 시간 간격으로 콜백 함수를 실행을 하고 ScrollThrottler클래스는 스크롤링 이벤트를 처리하는 역할을 한다.

 

ScrollThrottler 클래스 내부의 콜백 함수는 지연 시간이 지난 후에 실행이 된다 (여기서는 50 밀리초를 대기하도록 설정하였다). 만약 스크롤링 이벤트가 지연 시간 내에 다시 발생하면 기존 실행되던 콜백 함수는 취소되고 새로운 콜백 함수를 실행한다.

 

스크롤링 이벤트가 처리되는 부분에는 실제로 스크롤링 동작이 구현되어야 하므로 'jumpTo' 메서드 혹은 animateTo 메서드를 사용하여 실행 할 수 있다. 예를 들어 jumpTo의 경우에는

if (_scrollController != null) {
  final position = _scrollController.position;
  final extent = position.extentInside;
  final maxScrollExtent = position.maxScrollExtent;

  if (position.pixels + extent >= maxScrollExtent) {
    // 스크롤이 끝에 도달한 경우
    return;
  }

  // 스크롤 다운인 경우에만 스크롤 위치 업데이트
  if (delta > 0) {
    _scrollController.jumpTo(position.pixels + delta);
  }
}

를 사용하여 구현 가능하다. 현재 스크롤 위치와 스크롤 가능 영역 르기ㅗ 최대 스크롤 가능 위치를 계산 후 스크롤이 끝에 도달했는지 확인한다. 끝에 도달한 경우에는 스크롤 위치를 업데이트하지 않는다. 그리고 delta값이 양수에만 스크롤 위치를 업데이트 한다 (이는 스크롤이 다운인 경우에만 스크롤 위치를 업데이트 하기 위함이다).

 

사용 견본

: 준비중  

 

 

 

참고:

1. sht-3756.log https://velog.io/@sht-3756/Debounce%EC%99%80Throttle%EC%82%AC%EC%9A%A9

    2. RxJSMarble https://rxmarbles.com/