Flutter自定义通用防抖的实现

news2024/9/9 6:17:21

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

在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.coloradmin.cn/o/1962271.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

AMEYA360:上海雷卯电子CAN BUS芯片静电浪涌击穿整改方案

在现代电子系统中&#xff0c;CAN Bus(Controller Area Network Bus&#xff0c;控制器局域网络总线)作为一种常用的通信协议&#xff0c;标准CAN通常指的是CAN 2.0A和CAN 2.0B协议&#xff0c;其最大通讯速率为1Mbps。而高速CAN通常指的是CAN FD(CAN Flexible Data-rate)协议&…

如何磁盘覆写

使用命令提示符写0 命令提示符是Windows系统内置的一个非常实用的工具&#xff0c;可以通过几行短短的命令来完成各种各样的电脑相关操作而无需开启应用程序&#xff0c;所以我们可以通过命令提示符中的format命令来完成硬盘写0任务。 步骤1. 在搜索框中输入cmd并以管理员身份…

每日一题系列-两个数组的交集

&#x1f308;个人主页&#xff1a;羽晨同学 &#x1f4ab;个人格言:“成为自己未来的主人~” class Solution { public:int hash[1010] {0};vector<int> intersection(vector<int>& nums1, vector<int>& nums2) {vector<int> ret;for(a…

漏洞复现-路由器TOTOLINK-A6000R-RCE

本文来自无问社区&#xff0c;更多漏洞信息可前往查看http://wwlib.cn/index.php/artread/artid/14996.html 0x01 产品简介 TOTOLINK A6000R是一款性能卓越的无线路由器&#xff0c;采用先进的技术和设计&#xff0c;为用户提供出色的网络体验。其支持最新的Wi-Fi标准&#x…

Java学习----类和对象与封装

目录 一、面向对象和面向过程二、类类的定义类的实例化this引用&#xff08;这一块一定要看懂哦&#xff09;类的构造方法成员变量的初始化 三、封装包常见的包 四、关于static初始化 五、代码块六、对象的打印--toString 一、面向对象和面向过程 众所周知&#xff0c;Java语言…

HomeServer平台选择,介绍常用功能

​​ 平台选择 HomeServer 的性能要求不高&#xff0c;以下是我的硬件参数&#xff0c;可供参考&#xff1a; ‍ 硬件&#xff1a; 平台&#xff1a;旧笔记本CPU&#xff1a;i5 4210u内存 8G硬盘&#xff1a;128G 固态做系统盘&#xff0c;1T1T 机械盘组 RAID1 做存储。硬…

计算机网络-七层协议栈介绍

之前介绍了网络世界的构成&#xff0c;从宏观角度介绍了网络设备和网络架构&#xff0c;链接: link&#xff0c;但是这种认识过于粗糙&#xff0c;过于肤浅。网络本质上是用于主机之间的通信&#xff0c;是端对端的连接通信&#xff0c;两台计算机可能距离很远&#xff0c;主机…

新书推荐:《码农职场:IT 人求职就业手册》——照亮你的职业道路

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

PHP中关于排名和显示的问题

&#x1f3c6;本文收录于《CSDN问答解惑-专业版》专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收…

【LLM】五、open-webui+ollama搭建自己的RAG服务

系列文章目录 往期文章回顾&#xff1a; 【LLM】四、RAG简介 【LLM】三、open-webuiollama搭建自己的聊天机器人 【LLM】二、python调用本地的ollama部署的大模型 【LLM】一、利用ollama本地部署大模型 文章目录 ​​​​​​​ 目录 系列文章目录 文章目录 前言 一、RAG是…

计算机网络必会面经

1.键入网址到网页显示&#xff0c;期间发生了什么 2.在TCP/IP网络模型中。TCP将数据进行分段后&#xff0c;为什么还需要IP层继续分片 3.详细说明tcp三次握手&#xff0c;为什么是三次&#xff0c;若每次握手丢了&#xff0c;解决办法是什么 4.详细说明tcp四次挥手&#xff…

基于Docker搭建ELK

目录 1.系统操作 2.搭建es 3.kibana(新起终端跟es一起启动) 4.logstash&#xff08;新起终端和es一起启动&#xff09; 5.修改logstash配置文件 6. 创建索引 7. exit #退出容器 8. 在logstash节点插入数据&#xff0c;测试是否能拿取到&#xff08;下面如果本身有数据…

前端如何实现更换项目主题色的功能?

1、场景 有一个换主题色的功能&#xff0c;如下图&#xff1a; 切换颜色后&#xff0c;将对页面所有部分的色值进行重新设置&#xff0c;符合最新的主题色。 2、实现思路 因为色值比较灵活&#xff0c;可以任意选取&#xff0c;所以最好的实现方式是&#xff0c;根据设置的…

springboot文献检索系统-计算机毕业设计源码48521

摘要 文献检索系统主要功能模块包括用户管理、公告信息、新闻资讯、文献信息等&#xff0c;采取面对对象的开发模式进行软件的开发和硬体的架设&#xff0c;能很好的满足实际使用的需求&#xff0c;完善了对应的软体架设以及程序编码的工作&#xff0c;采取MySQL作为后台数据的…

[Git场景]常用工作场景演练

场景1:开发到一半的代码&#xff0c;还没提交&#xff0c;git拉下 对方的代码&#xff0c;但是其中有一个 commit 不想要怎么做 在 Git 中&#xff0c;如果你想拉取远程分支的代码&#xff0c;但不想要某个特定的提交&#xff0c;可以使用以下方法来解决&#xff1a; 方法1&a…

【Python】pandas:排序、重复值、缺省值处理、合并、分组

pandas是Python的扩展库&#xff08;第三方库&#xff09;&#xff0c;为Python编程语言提供 高性能、易于使用的数据结构和数据分析工具。 pandas官方文档&#xff1a;User Guide — pandas 2.2.2 documentation (pydata.org) 帮助&#xff1a;可使用help(...)查看函数说明文…

Linux基于centOS7 【进度条】【Git】【gdb】学习

目录 进度条 进度条的前置准备 sleep &#xff08;秒&#xff09;& usleep&#xff08;微秒&#xff09; sleep加\n和不加\n的区别 IO函数的缓冲区 回车&换行 10秒倒计时 进度条编写 git的使用 为什么要有git&#xff08;git版本控制器&#xff09; git的主要…

外卖项目day10---缓存商品/Spring Cache初学、购物车功能

缓存菜品&#xff0c;只需要在DishController中修改一下代码即可 /*** 菜品管理*/ RestController RequestMapping("/admin/dish") Api(tags "菜品相关接口") Slf4j public class DishController {Autowiredprivate DishService dishService;Autowiredpri…

【排序算法】Java实现三大非比较排序:计数排序、桶排序、基数排序

非比较排序概念 非比较排序是一种排序算法&#xff0c;它不通过比较元素之间的大小关系来进行排序&#xff0c;而是基于元素的特征或属性进行排序。这种方法在特定情况下可以比比较排序方法&#xff08;如快速排序、归并排序等&#xff09;更有效率&#xff0c;尤其是在处理大…

时间序列分析方法之 -- 长短期记忆网络(LSTM)原理及Python代码示例

目录 原理 适用情况 Python示例代码 结论 原理 长短期记忆网络&#xff08;LSTM&#xff0c;Long Short-Term Memory Networks&#xff09;是一种特殊的递归神经网络&#xff08;RNN&#xff09;&#xff0c;设计用于克服传统RNN在处理长序列数据时的梯度消失和梯度爆炸问…