Flutter按钮防抖实现：如何避免用户误触重复下单？

正确的防抖代码实现 #

在Widget的State类中，按以下方式维护Timer对象、处理点击逻辑，并做好资源清理：

class _YourWidgetState extends State<YourWidget> {
  Timer? _debounce;

  void _onButtonPressed() {
    // 取消之前未触发的Timer，确保只保留最后一次点击的触发逻辑
    _debounce?.cancel();
    
    // 设置延迟执行的Timer，这里用500ms作为防抖间隔，可根据业务调整
    _debounce = Timer(const Duration(milliseconds: 500), () {
      // 在这里编写真正的下单逻辑
      _submitOrder();
    });
  }

  void _submitOrder() {
    // 实际的下单操作，比如调用接口提交订单
    print("执行下单逻辑");
  }

  @override
  void dispose() {
    // 组件销毁时必须取消Timer，避免内存泄漏
    _debounce?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: _onButtonPressed,
      child: const Text("立即下单"),
    );
  }
}

逻辑说明 #

• 取消旧Timer：每次点击时先取消之前可能存在的未触发Timer，避免多次点击导致多次执行下单逻辑。
• 延迟执行核心操作：设置合理的延迟间隔（通常300-1000ms），用户停止点击后，最后一次设置的Timer才会触发下单逻辑，有效过滤快速误触。
• 资源清理：在dispose方法中取消Timer，防止组件销毁后Timer仍持有State引用造成内存泄漏。

额外优化建议 #

• 若下单是异步网络请求，可添加bool _isSubmitting状态标记，在请求未完成时直接拦截点击，和Timer防抖形成双重保障。
• 防抖间隔根据业务场景调整：比如高频操作场景用300ms，涉及支付的敏感操作可延长至800-1000ms。

内容的提问来源于stack exchange，提问作者NecSil