Flutter功能过滤插件 function_filter 的使用

function_filter 是一个用于函数过滤的Dart库，提供了基于时间间隔的防抖（debouncing）和节流（throttling）功能。这个库经过充分测试且易于使用，是管理函数执行速率的可靠选择。

特性

• Debouncer：延迟函数执行，直到最后一次调用后经过指定的时间。
• Throttler：限制函数的执行速率，确保在指定的时间间隔内最多执行一次。
• CallAggregator：累积函数调用并在指定的时间段内达到指定次数时触发执行。
• 提供静态方法和函数包装器两种方式，使用灵活。

基本用法

以下是一些使用 function_filter 库的基本示例。

防抖（Debouncing）

防抖是一种延迟函数执行的技术，直到最后一次调用后经过指定的时间。适用于用户停止某种操作（如输入或滚动）后再触发动作的场景。

import 'package:function_filter/function_filter.dart';

void main() {
  FunctionFilter.debounce(
    'somekey',
    Duration(milliseconds: 500),
    () {
      // 防抖后的函数逻辑
      print('Debounced function called.');
    },
  );
}

节流（Throttling）

节流限制了函数的执行频率，确保在指定的时间间隔内最多执行一次。适用于需要限制函数执行次数的场景，如处理滚动事件。

import 'package:function_filter/function_filter.dart';

void main() {
  FunctionFilter.throttle(
    'somekey',
    Duration(milliseconds: 500),
    () {
      // 节流后的函数逻辑
      print('Throttled function called.');
    },
  );
}

注意：在防抖和节流方法中可以使用任何类型的键来标识函数，如字符串、数字、对象等。

final objKey = Object(); // 可以是字符串、数字、对象等
FunctionFilter.throttle(
  objKey,
  Duration(milliseconds: 500),
  () => print('Throttled function called.'),
);

函数包装器示例

通过函数包装器，可以将函数封装在一个包装器中并传递。

Debouncer 包装器

final debouncer = Debouncer(Duration(milliseconds: 500), () {
  print('Debounced function executed!');
});

// 快速连续多次触发防抖函数
for (int i = 1; i <= 5; i++) {
  debouncer.call();
  await Future.delayed(Duration(milliseconds: 300));
}

Throttler 包装器

final throttler = Throttler(Duration(milliseconds: 500), () {
  print('Throttled function executed!');
});

// 快速连续多次触发节流函数
for (int i = 1; i <= 5; i++) {
  throttler.call();
  await Future.delayed(Duration(milliseconds: 300));
}

CallAggregator 包装器

// 如果在2秒内调用了5次，则执行该函数
final aggregator = CallAggregator(Duration(seconds: 2), 5, () {
  print('Aggregated calls executed!');
});
for (int i = 0; i < 5; i++) {
  aggregator.call();
  await Future.delayed(const Duration(milliseconds: 10));
}

完整示例 Demo

以下是一个完整的Flutter示例，展示了如何在实际应用中使用 function_filter 库。

import 'package:flutter/material.dart';
import 'package:function_filter/function_filter.dart';

void main() {
  runApp(const MaterialApp(home: DemoApp()));
}

class DemoApp extends StatefulWidget {
  const DemoApp({super.key});

  [@override](/user/override)
  State<StatefulWidget> createState() => _DemoAppState();
}

class _DemoAppState extends State<DemoApp> {
  var _counter = 0;
  late final _aggregator = CallAggregator(
    const Duration(seconds: 2),
    5,
    () => setState(() => _counter++),
  );

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: [
            const SizedBox(height: 100),
            Text('$_counter'),
            const SizedBox(height: 50),
            MaterialButton(
              onPressed: () => FunctionFilter.debounce(
                this,
                const Duration(seconds: 1),
                () => setState(() => _counter++),
              ),
              child: const Text('Debounce +1'),
            ),
            const SizedBox(height: 50),
            MaterialButton(
              onPressed: () => FunctionFilter.throttle(
                this,
                const Duration(seconds: 1),
                () => setState(() => _counter++),
              ),
              child: const Text('Throttle +1'),
            ),
            const SizedBox(height: 50),
            MaterialButton(
              onPressed: () => _aggregator.call(),
              child: const Text('点击5次，在2秒内'),
            ),
          ],
        ),
      ),
    );
  }
}