flutter开发实战-防抖Debounce与节流Throttler实现

flutter开发实战-防抖Debounce与节流Throttler实现

在开发中,经常遇到某些按钮或者界面操作需要做防抖或者节流操作。这里记录一下实现。

一、防抖Debounce与节流Throttler

  • 防抖Debounce

当有可能在短时间内对一个方法进行多次调用时,需要防抖,并且希望只有最后一次调用真正调用目标方法。因此,基本上每个调用都会启动一个计时器,如果在计时器执行之前发生另一个调用,则计时器会重置并再次开始等待所需的持续时间。当计时器最终超时时,将调用目标方法。

  • 节流Throttler

Throttling与debouncing有点相反------只有对方法的第一次调用才真正调用该方法,并且在指定的持续时间内进行的任何后续调用都将被忽略。例如,这对于限制刷新按钮的按下量非常有用。

二、实现防抖

防抖的实现基本上是每个调用都会启动一个计时器,如果在计时器执行之前发生另一个调用,则计时器会重置并再次开始等待所需的持续时间。当计时器最终超时时,将调用目标方法。

所以我们来定义一个防抖的类。

dart 复制代码
import 'dart:async';

import 'package:flutter/foundation.dart';

class Debouncer {
  final int milliseconds;
  Timer? _timer;

  Debouncer({required this.milliseconds});

  void run(VoidCallback action) {
    _timer?.cancel();
    _timer = Timer(Duration(milliseconds: milliseconds), action);
  }

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

通过使用Debouncer

dart 复制代码
// 防抖
  final _debouncer = Debouncer(milliseconds: 5000);


  void testDebouncer(BuildContext context) {
    _debouncer.run(() {
      print("testDebouncer time:${DateTime.now()}");
    });
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _debouncer.dispose();
  }

测试结果如下

flutter: testDebouncer time:2023-10-16 10:40:11.573277

在多次点击时候,只有当5s倒计时结束之后,才打印了一条。

三、实现节流

Throttling是第一次调用才是真正调用该方法,在持续的时间内后续的调用,均被忽略。

所以我们来定义一个节流的类

dart 复制代码
import 'dart:async';

import 'package:flutter/foundation.dart';

class Throttler {
  final int milliseconds;
  Timer? _timer;
  bool isExecuted = false;

  Throttler({required this.milliseconds});

  void run(VoidCallback action) {
    if (isExecuted) {
      return;
    }

    _timer = Timer(Duration(milliseconds: milliseconds), (){
      _timer?.cancel();
      isExecuted = false;
    });
    isExecuted = true;
    action();
  }

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

通过使用Throttler

dart 复制代码
  // 节流
  final _throttler = Throttler(milliseconds: 5000);

  void testThrottler(BuildContext context) {
    _throttler.run(() {
      print("testThrottler time:${DateTime.now()}");
    });
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _throttler.dispose();
  }

测试结果如下

testThrottler time:2023-10-16 10:42:41.445236

在多次点击时候,打印了第一次调用的输出,在5s的连续时间内,后面的点击均被忽略。

四、使用插件EasyDebounce实现

当然,也有EasyDebounce可以实现防抖Debounce与节流Throttler

在pubspec.yaml引入EasyDebounce

dart 复制代码
# 防抖与节流
  easy_debounce: ^2.0.3

实现防抖

dart 复制代码
EasyDebounce.debounce('testDebouncer', Duration(milliseconds: 500), () {
  print("EasyDebounce testDebouncer time:${DateTime.now()}");
});

实现节流

EasyThrottle.throttle('testThrottler', Duration(milliseconds: 500), () {

print("EasyThrottle testThrottler time:KaTeX parse error: Expected 'EOF', got '}' at position 21: ...Time.now()}"); }̲, onAfter: (){ ...{DateTime.now()}");

});

不需要的时候,在dispose中进行调用

dart 复制代码
  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    EasyThrottle.cancelAll();
    EasyDebounce.cancelAll();
  }

五、小结

flutter开发实战-防抖Debounce与节流Throttler实现。可能描述不准确,请见谅。

https://blog.csdn.net/gloryFlow/article/details/133869893

学习记录,每天不停进步。

相关推荐
时光の尘13 分钟前
C语言菜鸟入门·关键字·float以及double的用法
运维·服务器·c语言·开发语言·stm32·单片机·c
以后不吃煲仔饭27 分钟前
Java基础夯实——2.7 线程上下文切换
java·开发语言
进阶的架构师28 分钟前
2024年Java面试题及答案整理(1000+面试题附答案解析)
java·开发语言
前端拾光者32 分钟前
利用D3.js实现数据可视化的简单示例
开发语言·javascript·信息可视化
程序猿阿伟33 分钟前
《C++ 实现区块链:区块时间戳的存储与验证机制解析》
开发语言·c++·区块链
傻啦嘿哟1 小时前
如何使用 Python 开发一个简单的文本数据转换为 Excel 工具
开发语言·python·excel
大数据编程之光1 小时前
Flink Standalone集群模式安装部署全攻略
java·大数据·开发语言·面试·flink
初九之潜龙勿用1 小时前
C#校验画布签名图片是否为空白
开发语言·ui·c#·.net
Dola_Pan1 小时前
C语言:数组转换指针的时机
c语言·开发语言·算法
ExiFengs1 小时前
实际项目Java1.8流处理, Optional常见用法
java·开发语言·spring