name: asyncredux-debounce-mixin description: 添加防抖混入以在用户输入暂停前等待行动。覆盖设置`debounce`持续时间、实现输入即搜索功能以及在快速输入期间避免过度API调用。

防抖混入

Debounce混入延迟动作执行，直到一段时间内没有活动。每个新的派遣重置计时器，因此动作只在派遣停止指定持续时间后运行一次。这对于输入即搜索功能和避免在快速用户输入期间的过度API调用非常理想。

基本用法

将Debounce混入添加到您的动作类中：

class SearchText extends AppAction with Debounce {
  final String searchTerm;
  SearchText(this.searchTerm);

  Future<AppState?> reduce() async {
    var response = await http.get(
      Uri.parse('https://example.com/?q=${Uri.encodeComponent(searchTerm)}')
    );
    return state.copy(searchResult: response.body);
  }
}

当用户快速输入时，每次击键派遣SearchText。混入延迟执行，每个新派遣重置计时器。API调用只在用户停止输入防抖周期后发生。

设置防抖持续时间

默认防抖周期是333毫秒。覆盖debouncegetter以自定义：

class SearchText extends AppAction with Debounce {
  final String searchTerm;
  SearchText(this.searchTerm);

  // 在执行前等待1秒不活动
  int get debounce => 1000;

  Future<AppState?> reduce() async {
    var response = await http.get(
      Uri.parse('https://example.com/?q=${Uri.encodeComponent(searchTerm)}')
    );
    return state.copy(searchResult: response.body);
  }
}

自定义锁构建器

默认情况下，所有防抖动作的实例共享相同的锁。覆盖lockBuilder()为不同的动作实例创建独立的防抖周期：

class SearchField extends AppAction with Debounce {
  final String fieldId;
  final String searchTerm;
  SearchField(this.fieldId, this.searchTerm);

  // 每个fieldId获得其自己独立的防抖计时器
  Object? lockBuilder() => fieldId;

  Future<AppState?> reduce() async {
    // 搜索逻辑在这里
  }
}

这使得多个搜索字段能够独立操作，每个都有自己的防抖计时器。

防抖与节流

这两种混入服务于不同的目的：

混入	行为	最佳用途
节流	在第一次派遣时立即运行，然后在周期内阻止后续派遣	限制应立即执行的动作速率（例如，刷新按钮）
防抖	等待安静时间，只在派遣停止后运行	等待用户完成输入（例如，输入即搜索）

节流：“立即执行，然后等待再次允许” 防抖：“等待活动停止，然后执行”

混入兼容性

防抖可以与以下组合：

CheckInternet
NoDialog
AbortWhenNoInternet
NonReentrant
Fresh
Throttle

防抖不能与以下组合：

Retry
UnlimitedRetries
UnlimitedRetryCheckInternet
OptimisticCommand
OptimisticSync
OptimisticSyncWithPush
ServerPush

参考文献

文档中的URL：

name: asyncredux-debounce-mixin description: 添加防抖混入以在用户输入暂停前等待行动。覆盖设置debounce持续时间、实现输入即搜索功能以及在快速输入期间避免过度API调用。