Flutter自定义通用防抖的实现

server/2024/12/22 20:49:51/

在前端项目开发中,点击事件的防抖是一个永远无法错开的点,特别是针对一些复杂的业务场景,如果不做好防抖操作,就会导致页面或功能触发多次,引发异常或闪退。

在Flutter中可以通过扩展函数的特性 对Function增加全局扩展函数,实现防抖效果。

具体如下:

extension FunctionExt on Function {VoidCallback throttle() {return FunctionProxy(this).throttle;}// 立即执行目标操作,同时给出一个延迟的时间,// 在该时间范围内如果再次触发了事件,该次事件会被忽略,直到超过该时间范围后触发事件才会被处理。VoidCallback throttleWithTimeout({int? timeout}) {return FunctionProxy(this, timeout: timeout).throttleWithTimeout;}// 在触发事件时,不立即执行目标操作,而是给出一个延迟的时间,// 在该时间范围内如果再次触发了事件,则重置延迟时间,直到延迟时间结束才会执行目标操作。VoidCallback debounce({int? timeout}) {return FunctionProxy(this, timeout: timeout).debounce;}
}class FunctionProxy {static final Map<String, bool> _funcThrottle = {};static final Map<String, Timer> _funcDebounce = {};final Function? target;final int timeout;FunctionProxy(this.target, {int? timeout}) : timeout = timeout ?? 500;// 节流(默认延迟)void throttle() async {String key = hashCode.toString();bool enable = _funcThrottle[key] ?? true;if (enable) {_funcThrottle[key] = false;try {await target?.call();} catch (e) {rethrow;} finally {_funcThrottle.remove(key);}}}// 节流(自定义延迟)void throttleWithTimeout() {String key = hashCode.toString();bool enable = _funcThrottle[key] ?? true;if (enable) {_funcThrottle[key] = false;Timer(Duration(milliseconds: timeout), () {_funcThrottle.remove(key);});target?.call();}}//延迟顺序执行的防抖void debounce() {String key = hashCode.toString();Timer? timer = _funcDebounce[key];timer?.cancel();timer = Timer(Duration(milliseconds: timeout), () {Timer? t = _funcDebounce.remove(key);t?.cancel();target?.call();});_funcDebounce[key] = timer;}
}

在使用的地方

              onBackPressed: () {}.throttleWithTimeout(timeout: 500)

这种方案只是提供了一种防抖的实现,当然也可以自定义通用的Button,通过点击事件触发的时间自行判断处理。


http://www.ppmy.cn/server/93226.html

相关文章

六种方法实现Python文件之间的互动!

一、exec() 首先&#xff0c;我们生成一个名为**“file1.py”的python文件**&#xff1a; # file1.py print("Hello from file1!")然后&#xff0c;再生成一个名为“main.py”的python文件&#xff1a; # main.py filename file1.py with open(filename) a…

python机器学习9--网络服务器

1.有没有更简单的方法让朋友可以直接取得你所开发的Python程序&#xff1f;有两个方法可以使用。第一个方法是使用安装程序&#xff0c;将完整的Python程序安装&#xff0c;另外一个方法就是使用网页服务器的方式&#xff0c;在此将介绍和使用Python创建一个网页服务器&#xf…

探索天穹数仓自治能力的新实践

探索天穹数仓自治能力的新实践 随着业务和技术的发展&#xff0c;传统数仓模式向数智数仓模式演进&#xff0c;数据治理面临诸多挑战。自治平台采用双引擎策略&#xff0c;注重感知能力、观测能力、诊断能力和优化能力的建设&#xff0c;实现了对数据的精细化管理。例如&#x…

Kylin Cube构建日志分析:洞察大数据构建过程的窗口

Kylin Cube构建日志分析&#xff1a;洞察大数据构建过程的窗口 Apache Kylin是一款为Hadoop优化的开源分布式分析引擎&#xff0c;它通过构建数据立方体&#xff08;Cube&#xff09;来实现对大数据的快速查询。在维护和优化Cube的过程中&#xff0c;构建日志分析是一个重要的…

2024-07-24 buildroot c语言应用获取 kernel kobject_uevent_env 发送的消息,侦测USB口变化。

一、kobject_uevent_env 是 Linux 内核中的一个函数&#xff0c;用于发送内核事件到用户空间。它主要用于生成和发送与内核对象&#xff08;kobject&#xff09;相关的事件通知&#xff0c;这些事件通常用于通知用户空间程序&#xff08;如 udev&#xff09;有关硬件的变化或其…

不得不安利的程序员开发神器,太赞了!!

作为一名程序员&#xff0c;你是否常常为繁琐的后端服务而感到头疼&#xff1f;是否希望有一种工具可以帮你简化开发流程&#xff0c;让你专注于创意和功能开发&#xff1f;今天&#xff0c;我要向大家隆重推荐一款绝佳的开发神器——MemFire Cloud。它专为懒人开发者准备&…

【扒模块】DFF

图 医学图像分割任务 代码 import torch import torch.nn as nnfrom timm.models.layers import DropPath # 论文&#xff1a;D-Net&#xff1a;具有动态特征融合的动态大核&#xff0c;用于体积医学图像分割&#xff08;3D图像任务&#xff09; # https://arxiv.org/abs/2403…

【七】Hadoop3.3.4基于ubuntu24的分布式集群安装

文章目录 1. 下载和准备工作1.1 安装包下载1.2 前提条件 2. 安装过程STEP 1: 解压并配置Hadoop选择环境变量添加位置的原则检查环境变量是否生效 STEP 2: 配置Hadoop2.1. 修改core-site.xml2.2. 修改hdfs-site.xml2.3. 修改mapred-site.xml2.4. 修改yarn-site.xml2.5. 修改hado…