Flutter防抖操作插件dart_debouncer的使用

Dart debouncer

dart_debouncer 是一个用于在Dart中创建防抖功能的包，它支持多实例防抖。该包不采用单例模式，为处理用户交互（如按钮点击或文本输入更改）提供了一种便捷的方法，以增强用户体验，避免意外操作、不必要的逻辑执行或频繁更新。

如何使用

实例化Debouncer类

首先，需要实例化一个 Debouncer 类：

final Debouncer debouncer = Debouncer();

然后，在任何地方使用它：

TextFormField(
  ...
  onChanged: (final String text) {
    debouncer.resetDebounce(() {
      // Do something with the text
    });
  },
),

清除防抖定时器

使用完防抖计时器后不要忘记清除它：

debouncer.dispose();

⚠️ 注意：调用 dispose 并不是必须的。但如果你不清除它，即使你不再处于放置它的上下文中，函数仍然会被执行。所以如果例如防抖器内的函数使用了已经不存在的依赖项，你将收到错误。这基本上会取消防抖计时器和执行。

其他有用的功能

添加在防抖执行前运行的函数

你可以添加任意数量的函数。它们将按照添加的顺序执行。

debouncer.addOnInitFunction(() {
    print('start 1');
});
debouncer.addOnInitFunction(() {
    print('start 2');
});

添加在防抖执行后运行的函数

同样可以添加任意数量的函数，按添加顺序执行。

debouncer.addOnEndFunction(() {
    print('end 1');
});
debouncer.addOnEndFunction(() {
    print('end 2');
});

确保一个函数不会与防抖函数并行运行

如果你想运行一个函数，并确保它不会与防抖器中的异步执行函数同时运行，可以使用 guaranteedExecutionAfterDebounceFinished 方法。

final debouncer = Debouncer(timerDuration: Duration(seconds: 1));

debouncer.resetDebounce(() async {
  await Future.delayed(Duration(seconds: 1));
  print('Done!');
});

// Will not execute until debounce function is running. Will wait it finish first
debouncer.guaranteedExecutionAfterDebounceFinished(() {
  print('Only runned after 2 seconds');
});
print(debouncer.isTimerActive());

检查防抖函数是否正在运行

final debouncer = Debouncer(timerDuration: Duration(seconds: 1));
final bool isDebouncerRunning = debouncer.isTimerActive();
print(isDebouncerRunning);

更改防抖持续时间

// The debouncer time is 1 sec
final debouncer = Debouncer(timerDuration: Duration(seconds: 1));

// Now the timer is 3 secs
debouncer.updateTimer(Duration(seconds: 3));

持续时间扩展方法

提供了 num 的扩展方法，使指定持续时间更加容易。例如：2.seconds，0.1.minutes 或 300.ms。

示例代码

下面是一个完整的示例，展示了如何在Flutter应用中使用 dart_debouncer 包：

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

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

  @override
  State<Example> createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  final Debouncer debouncer = Debouncer(
    timerDuration: const Duration(seconds: 1),
  );
  final emailEC = TextEditingController();

  String typedText = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(typedText),
      ),
      body: Center(
        child: TextField(
          controller: emailEC,
          onChanged: (value) {
            debouncer.resetDebounce(() {
              /// Will only set value after 1 second of no typing
              setState(() {
                typedText = value;
              });
            });
          },
        ),
      ),
    );
  }

  @override
  void dispose() {
    debouncer.dispose();
    emailEC.dispose();
    super.dispose();
  }
}

这个例子展示了一个简单的Flutter页面，其中包含一个文本字段。当用户停止输入1秒后，typedText 将被设置为当前文本字段的值。此外，我们在 dispose 方法中清理了 Debouncer 和 TextEditingController，以确保没有内存泄漏。