flutter 点击按钮限流方案

---

---

前言

最近写flutter项目，遇到提交表单重复点击问题，下面是解决方案，希望帮助到大家。

---

一、理解限流的思想

1、限流思想
限流（Throttle）
限流是指在指定的时间内，事件最多只能触发一次，即使在这段时间内触发了多次事件，也只会执行一次。限流通常用于控制事件的频率，以减少资源消耗或避免过载。

理解方式：想象一个水龙头，你希望无论用户如何快速打开或关闭它，水流量在一定时间内只会变化一次，以防止管道压力过大。

二、flutter实现代码如下：

1、完整的代码如下：

import 'dart:async';

typedef ThrottleCallback = void Function();

class Throttle {
  final Duration duration;

  // 使用一个StreamController来控制事件流
  final StreamController<void> _controller = StreamController<void>.broadcast();

  // 保存上一次事件的时间戳
  int _lastEventTimestamp = 0;

  Throttle(this.duration);

  // 启动一个限流的事件
  Stream<void> start(ThrottleCallback callback) {
    // 检查是否在限流时间范围内
    if (_lastEventTimestamp == 0 ||
        DateTime.now().millisecondsSinceEpoch - _lastEventTimestamp >= duration.inMilliseconds) {
      // 如果不在限流时间内，则执行回调函数
      callback();
      // 更新时间戳
      _lastEventTimestamp = DateTime.now().millisecondsSinceEpoch;
    } else {
      // 如果在限流时间内，则忽略此次事件
      // 可以通过添加日志或其他方式来记录事件被忽略的情况
    }
    // 返回事件流，可能用于外部监听
    return _controller.stream;
  }

  // 销毁资源
  void dispose() {
    _controller.close();
  }
}

// 使用示例
void main() {
  final throttle = Throttle(Duration(milliseconds: 500)); // 设置限流时间为500毫秒

  // 定义一个需要限流的回调函数
  ThrottleCallback limitedFunction = () {
    print('Function called!');
  };

  // 触发限流函数
  throttle.start(limitedFunction);

  // 在Flutter应用中，你可以将throttle.start用于任何需要限流的操作，如用户输入、按钮点击等
  // 例如，为一个按钮添加限流逻辑：
  // ElevatedButton(
  //   onPressed: () => throttle.start(limitedFunction),
  //   child: Text('Click Me'),
  // )
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

总结

这就是Flutter解决点击按钮重复请求问题相关代码，希望能帮助到你！