flutter如何实现debouncer

在Flutter中，如何实现一个debouncer来防止频繁触发事件？比如搜索框输入时，希望用户停止输入300毫秒后再发起请求，而不是每次输入都触发。有没有最佳实践或常用库推荐？最好能提供一个简单的代码示例。

2 回复

在Flutter中实现防抖（debouncer）可以通过Timer类来实现，核心思路是延迟执行函数，若在延迟期间再次触发则取消之前的计时并重新开始。

示例代码：

import 'dart:async';

class Debouncer {
  final Duration delay;
  Timer? _timer;

  Debouncer({required this.delay});

  void call(void Function() callback) {
    _timer?.cancel();
    _timer = Timer(delay, callback);
  }

  void dispose() {
    _timer?.cancel();
  }
}

使用方式：

final debouncer = Debouncer(delay: Duration(milliseconds: 500));

// 在输入框监听中使用
onChanged: (value) {
  debouncer(() {
    // 执行搜索等操作
    performSearch(value);
  });
}

记得在dispose时调用debouncer.dispose()避免内存泄漏。

更多关于flutter如何实现debouncer的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中，实现 Debouncer 可以防止函数在短时间内被频繁调用，常用于搜索框输入、按钮点击等场景。以下是两种常用方法：

1. 使用 Timer 实现基础 Debouncer

class Debouncer {
  final Duration delay;
  Timer? _timer;

  Debouncer({required this.delay});

  void call(void Function() callback) {
    _timer?.cancel();
    _timer = Timer(delay, callback);
  }

  void dispose() {
    _timer?.cancel();
  }
}

// 使用示例
final debouncer = Debouncer(delay: const Duration(milliseconds: 500));

TextField(
  onChanged: (value) {
    debouncer(() {
      // 执行搜索或其他操作
      print('搜索: $value');
    });
  },
);

2. 使用 RxDart 实现（需要添加依赖）

import 'package:rxdart/rxdart.dart';

// 在 StatefulWidget 中使用
final _searchController = BehaviorSubject<String>();

@override
void initState() {
  super.initState();
  _searchController
      .debounceTime(const Duration(milliseconds: 500))
      .listen((value) {
    // 执行搜索操作
    print('搜索: $value');
  });
}

TextField(
  onChanged: _searchController.add,
);

@override
void dispose() {
  _searchController.close();
  super.dispose();
}

关键点：

  • 设置合适的延迟时间（通常 300-800ms）
  • 记得在 dispose 时取消计时器/关闭流
  • 适用于输入搜索、表单验证等场景

第一种方案更轻量，第二种适合已使用 RxDart 的项目。根据项目需求选择合适方案即可。

回到顶部