debounce, throttle 비교 요약

Debounce, Throttle 비교

 

구현 예제

물론, Timer를 이용하여 직접 구현할 수 있겠지만, 아주 잘만들어진 외부 라이브러리가 있습니다.

라이브러리(그림을 누르면 해당 라이브러리로 이동)

라이센스는 MIT로 편하게 사용하시면 돼요

 

예제를 보면 (아래에 전체 코드가 있습니다.)

debounce, throttle 구현 예제

 

끝입니다. 정말 쉽죠?

 

물론, 직접 구현 할때와 마찬 가지로 라이브러리 내부에 static 변수에 할당 되기 때문에 widget이 dispose할 때 부여 되었던 변수를 cancel할 필요가 있습니다.

 

전체 예제 소스

import 'package:easy_debounce/easy_debounce.dart';

void myMethod(String message) {
print(message);
}

void main() async {
// 예제 1: 약 200ms 후에 myMethod()를 단 한 번 호출
print('\nExample 1');
for (int i = 0; i < 5; i++) {
EasyDebounce.debounce('debouncer1', Duration(milliseconds: 200),
() => myMethod('Executing debouncer1! (i: $i)'));
}

// 위 예제가 끝날 때까지 기다리기
await Future.delayed(Duration(milliseconds: 400));

// 예제 2: 5번의 myMethod() 호출. 각 반복 사이에 300ms 기다림
print('\nExample 2');
for (int i = 0; i < 5; i++) {
EasyDebounce.debounce('debouncer2', Duration(milliseconds: 200),
() => myMethod('Executing debouncer2! (i: $i)'));
await Future.delayed(Duration(milliseconds: 300));
}

// 위 예제가 끝날 때까지 기다리기
await Future.delayed(Duration(milliseconds: 400));

// 예제 3: 약 200ms 후에 myMethod()를 두 번 호출. 서로 다른 태그 사용
print('\nExample 3');
for (int i = 0; i < 5; i++) {
EasyDebounce.debounce('debouncer3', Duration(milliseconds: 200),
() => myMethod('Executing debouncer3! (i: $i)'));
EasyDebounce.debounce('debouncer4', Duration(milliseconds: 200),
() => myMethod('Executing debouncer4! (i: $i)'));
}

// 위 예제가 끝날 때까지 기다리기
await Future.delayed(Duration(milliseconds: 400));

// 예제 4: 지속 시간이 0일 때, onExecute()는 동기적으로 호출
print('\nExample 4');
int x = 0;
EasyDebounce.debounce('debouncer5', Duration.zero, () {
++x;
myMethod('Executing debouncer5! (x: $x)');
});
print('After debouncer5: x: $x');

// 위 예제가 끝날 때까지 기다리기
await Future.delayed(Duration(milliseconds: 400));

// 예제 5: 지속 시간이 0이 아닐 때, onExecute()는 비동기적으로 호출
print('\nExample 5');
int y = 0;
EasyDebounce.debounce('debouncer6', Duration(milliseconds: 10), () {
++y;
myMethod('Executing debouncer6! (y: $y)');
});
print('After debouncer6: y: $y');

// 위 예제가 끝날 때까지 기다리기
await Future.delayed(Duration(milliseconds: 400));

// 예제 6: fire()를 호출하면 콜백이 즉시 실행됨. 타이머는 제거되지 않음
print('\nExample 6');
int z = 0;
EasyDebounce.debounce('debouncer7', Duration(milliseconds: 10), () {
++z;
myMethod('Executing debouncer7! (z: $z)');
});
EasyDebounce.fire('debouncer7');
print('After debouncer7: z: $z');

// 위 예제가 끝날 때까지 기다리기
await Future.delayed(Duration(milliseconds: 400));
}

+ Recent posts