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

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

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

一、防抖Debounce与节流Throttler

  • 防抖Debounce

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

  • 节流Throttler

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

二、实现防抖

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

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

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

// 防抖final _debouncer = Debouncer(milliseconds: 5000);void testDebouncer(BuildContext context) {_debouncer.run(() {print("testDebouncer time:${DateTime.now()}");});}void dispose() {// TODO: implement disposesuper.dispose();_debouncer.dispose();}

测试结果如下

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

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

三、实现节流

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

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

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

  // 节流final _throttler = Throttler(milliseconds: 5000);void testThrottler(BuildContext context) {_throttler.run(() {print("testThrottler time:${DateTime.now()}");});}void dispose() {// TODO: implement disposesuper.dispose();_throttler.dispose();}

测试结果如下

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

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

四、使用插件EasyDebounce实现

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

在pubspec.yaml引入EasyDebounce

# 防抖与节流easy_debounce: ^2.0.3

实现防抖

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中进行调用

  void dispose() {// TODO: implement disposesuper.dispose();EasyThrottle.cancelAll();EasyDebounce.cancelAll();}

五、小结

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/109055.shtml

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

相关文章

GO 工程下载依赖操作流程(go mod)

1. 写一个main.go文件 package main import ("fmt""net/http""github.com/ClickHouse/clickhouse-go" ) func main() {fmt.Println("服务启动......")http.HandleFunc("/hello", func(w http.ResponseWriter, r *http.Requ…

基于springboot实现酒店管理系统平台项目【项目源码+论文说明】计算机毕业设计

摘要 21世纪的今天,随着社会的不断发展与进步,人们对于信息科学化的认识,已由低层次向高层次发展,由原来的感性认识向理性认识提高,管理工作的重要性已逐渐被人们所认识,科学化的管理,使信息存…

如何优化模型渲染性能

1、提高模型渲染性能的好处 优化模型渲染性能有以下几个好处: 提高用户体验:良好的模型渲染性能可以使图形应用程序更加流畅和响应快速。当模型以较高的帧率渲染时,用户可以获得更流畅、更真实的视觉效果,提升整体的用户体验。 …

Qt 为Android app添加系统签名

Qt 为Android app添加系统签名 flyfish 一 环境 lsb_release -aNo LSB modules are available. Distributor ID: Ubuntu Description: Ubuntu 23.04 Release: 23.04 Codename: lunarQt Creator 10.0.2 构建套件 Qt 6.5.1 Clang arm64-v8a 二 运行Qt 如果没有Qt图标 在终端…

使用PM2部署spring-boot项目

一、打包应用 1、先清理之前的 2、修改pom.xml文件关于项目名称版本及jdk版本 3、在idea中直接打包项目 4、等打包完成后会在target文件夹下有一个xx.jar的文件,拷贝出来放到一个文件夹下,或者服务器指定目录下 二、使用pm2部署.jar文件 1、pm2的安装,参考地…

MyBatis涉及的动态SQL

动态 SQL 提供了更大的灵活性和可重用性&#xff0c;可以根据不同情况生成不同的 SQL 语句&#xff0c;从而满足应用程序的需求。它简化了数据库操作的编写和管理&#xff0c;提高了开发效率和代码的可维护性。 <if> 用于条件判断&#xff0c;根据条件决定是否包含某个SQ…

vscode使用code runner乱码

"code-runner.executorMap": {"python": "set PYTHONIOENCODINGutf8 && python $fullFileName"}

【下载器篇】获取微软应用商店应用安装包的方法

【下载器篇】获取微软应用商店应用安装包的方法 微软应用商店历史版本应用下载方法&#xff0c;部分历史版本无法搜索到—【蘇小沐】 文章目录 【下载器篇】获取微软应用商店应用安装包的方法1.实验环境 &#xff08;一&#xff09;微软商店的在线链接生成器1、复制该应用的在…

点云从入门到精通技术详解100篇-基于三维点云的并联机器人 抓取(续)

目录 3 Delta并联机器人3D视觉系统搭建及抓取点计算 3.1 系统总体方案 3.2 Delta并联机器人结构介绍

Django中djangorestframework-simplejwt的使用

发现了一篇很好的文章&#xff0c;上面说的很详细&#xff1a; 链接地址&#xff1a;Django REST Framework教程(7): 如何使用JWT认证(神文多图) - 知乎

机器学习绪论

目录 第1关&#xff1a;什么是机器学习 相关知识 题目答案 第2关&#xff1a;机器学习的常见术语 相关知识 假设空间 归纳偏好 题目答案 第3关&#xff1a;机器学习的主要任务 相关知识 分类 回归 聚类 题目答案 第1关&#xff1a;什么是机器学习 相关知识 相信…

美团二面算法题-输出每对有效括号内的内容;

<!-- 题目&#xff0c;输出每对有效括号内的内容&#xff1b;输入&#xff1a;"(11)*2" 输出&#xff1a;11输入&#xff1a; "((12)*(34))2" 输出&#xff1a;12, 34, (12)*(34)-->function test (str) {let res []let stask []for(let i0;i<…

ASP.NET framework升级core .NET 6.0

C# ASP.NET framework 升级core .NET 6.0 .NET 7.0 .NET 8.0 或者以上 .net framework、.net standard、.net core .net 5/6/7/8 区别_.net 6.0和.net framework的区别-CSDN博客 using System.Web.Http; using HttpPostAttribute Microsoft.AspNetCore.Mvc.HttpPostA…

网络解析(二)

ICMP 报文有很多的类型,不同的类型有不同的代码。最常用的类型是主动请求为 8,主动请求的应答为 0。 ICMP 相当于网络世界的侦察兵。我讲了两种类型的 ICMP 报文,一种是主动探查的查询报文,一种异常报告的差错报文; ping 使用查询报文,Traceroute 使用差错报文。 IP和…

了解主启动类怎么运行

//SpringBootApplication 标注这个类是spring boot的应用&#xff0c;启动类下的所有资源都会被导入 SpringBootApplication public class SpringbootApplication { public static void main(String[] args) { //以为是启动了一个方法&#xff0c;没想到启动了一个服务 SpringA…

ChatGPT技术或加剧钓鱼邮件攻击

我们对ChatGPT这一新技术并不陌生&#xff0c;也早就听闻ChatGPT可以通过某种方式绕过安全机制&#xff0c;对目标进行入侵。 ChatGPT的“越狱”技术已经迭代数次&#xff0c;甚至有了先进的“邪恶GPT”WormGPT和FraudGPT&#xff0c;两者都能快速实现钓鱼邮件骗局。 安全分析…

协同办公系统OA实施过程中需要注意的细节

随着企业对于高效、便捷的办公方式的需求增加&#xff0c;协同办公系统OA正逐渐成为企业信息化建设的热门选择。然而&#xff0c;协同办公系统OA的实施并非一蹴而就&#xff0c;需要企业在实施过程中注意一系列的细节。 一、规划与需求分析 企业应根据自身的业务需求和发展战略…

智能物联网解决方案:蓝牙IOT主控模块打造高效监测和超低功耗

物联网蓝牙模块&#xff0c;无论单模&#xff0c;还是双模&#xff0c;或者双模音频的选择&#xff0c;如下文说描述&#xff1a; 蓝牙芯片模块市场的百花齐放&#xff0c;也带来的工程师在选型时碰到很大的困难&#xff0c;但是无论是做半成品&#xff0c;还是做成品&#xf…

【数字图像处理笔记】01-数字图像基础

01-数字图像基础 图像类型 黑白(二值)图像 只有黑白两种颜色的图像称为黑白图像或单色图像&#xff0c;图像的每个像素只能是黑或白&#xff0c;没有中间的过渡&#xff0c;故又称为二值图像。 二值图像的像素值只能为0或1&#xff0c;图像中的每个像素值用1位存储。图像矩阵中…

钢铁异常分类140篇Trans 学习笔记 小陈读paper

钢铁异常分类 对比学习 比较好用 1.首先&#xff0c;为每个实例生成一对样本&#xff0c; 来自同一实例的样本被认为是正例&#xff0c; 来自不同实例的样本被认为是负例。 2.其次&#xff0c;这些样本被馈送到编码器以获得嵌入。 3.在对比损失[16]的影响下&#xff0c; …