Dart/Flutter的防抖与节流 - 汇站网

Dart/Flutter的防抖与节流

2023-11-23 0 1,039

Dart/Flutter的防抖与节流

防抖(debounce)

是指在触发事件后,在 n 秒内函数只能执行一次。如果在 n 秒内再次触发事件,将重新计算函数执行时间。防抖常用于实时搜索,当用户连续输入时,只有在停止输入后才会触发搜索接口。

// https://www.huizhanii.com
import 'dart:async';

Map<String, Timer> _funcDebounce = {};

/// 函数防抖
/// [func]: 要执行的方法
/// [milliseconds]: 要迟延的毫秒时间
Function debounce(Function func, [int milliseconds = 500]) {
  assert(func != null);
  Function target = () {
    String key = func.hashCode.toString();
    Timer _timer = _funcDebounce[key];
    if (_timer == null) {
      func?.call();
      _timer = Timer(Duration(milliseconds: milliseconds), () {
        Timer t = _funcDebounce.remove(key);
        t?.cancel();
        t = null;
      });
      _funcDebounce[key] = _timer;
    }
  };
  return target;
}

调用:

// https://www.huizhanii.com
void onSearch() {}

debounce(onSearch, 1000)();

节流(throttle)

是让函数有节制地执行,而不是无节制地触发一次就执行一次。节流的含义是在某个时间段内只能执行一次。节流常用于按钮重复提交的场景。

// https://www.huizhanii.com
import 'dart:async';

Map<String, bool> _funcThrottle = {};

/// 函数节流
/// [func]: 要执行的方法
Function throttle(Future Function() func) {
  if (func == null) {
    return func;
  }
  Function target = () {
    String key = func.hashCode.toString();
    bool _enable = _funcThrottle[key] ?? true;
    if (_enable) {
      _funcThrottle[key] = false;
      func().then((_) {
        _funcThrottle[key] = false;
      }).whenComplete(() {
        _funcThrottle.remove(key);
      });
    }
  };
  return target;
}

调用:

// https://www.huizhanii.com
Future<void> onSubmit() async {}

throttle(onSubmit)();

封装方法复用参考

// https://www.huizhanii.com
class CommonUtil {
  static const deFaultDurationTime = 300;
  static Timer timer;

  // 防抖函数
  static debounce(Function doSomething, {durationTime = deFaultDurationTime}) {
    timer?.cancel();
    timer = new Timer(Duration(milliseconds: durationTime), () {
      doSomething?.call();
      timer = null;
    });
  }

  // 节流函数
  static const String deFaultThrottleId = 'DeFaultThrottleId';
  static Map<String, int> startTimeMap = {deFaultThrottleId: 0};
  static throttle(Function doSomething, {String throttleId = deFaultThrottleId, durationTime = deFaultDurationTime, Function continueClick}) {
    int currentTime = DateTime.now().millisecondsSinceEpoch;
    if (currentTime - (startTimeMap[throttleId] ?? 0) > durationTime) {
      doSomething?.call();
      startTimeMap[throttleId] = DateTime.now().millisecondsSinceEpoch;
    } else {
      continueClick?.call();
    }
  }
  
}

使用

// https://www.huizhanii.com
GestureDetector(
      onTap: () => CommonUtil.throttle(onTap, durationTime: durationTime)
)

CommonUtil.debounce(searchApi)

转载请注明:汇站网 » Dart/Flutter 的防抖与节流

收藏 (0)

微信扫一扫

支付宝扫一扫

点赞 (0)

感谢您的来访,获取更多精彩资源请收藏本站。

本站声明

本资源仅用于个人学习和研究使用,禁止用于任何商业环境!

 1.  本网站名称:汇站网
 2.  本站永久网址:https://www.huizhanii.com/
 3.  本站所有资源来源于网友投稿和高价购买,所有资源仅对编程人员及源代码爱好者开放下载做参考和研究及学习,本站不提供任何技术服务!
 4.  未经原版权作者许可,禁止用于任何商业环境,任何人不得擅作它用,下载者不得用于违反国家法律,否则发生的一切法律后果自行承担!
 5.  为尊重作者版权,请在下载24小时内删除!请购买原版授权作品,支持你喜欢的作者,谢谢!
 6.  若资源侵犯了您的合法权益, 请持您的版权证书和相关原作品信息来信通知我们请来信     通知我们我们会及时删除,给您带来的不便,我们深表歉意!
 7.  如下载链接失效、广告或者压缩包问题请联系站长处理!
 8.  如果你也有好源码或者教程,可以发布到网站,分享有金币奖励和额外收入!
 9.  本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
 10.  因源码具有可复制性,一经赞助 ,不得以任何形式退款。
 11.  更多详情请点击查看

汇站网 flutter Dart/Flutter的防抖与节流 https://www.huizhanii.com/33899.html

汇站

站长资源下载中心-找源码上汇站

常见问题
  • 如果付款后没有弹出下载页面,多刷新几下,有问题联系客服!
查看详情
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情

相关文章

发表评论
暂无评论
  随机评论 表情开关按钮图片
表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情
登录后评论
联系官方客服

为您解决烦忧 - 24小时在线 专业服务

(汇站网)一个专注站长资源的平台网站,提供最新的网站模板和整站源码,内容包含各类精品网页模板,企业网站模板,网站模板,DIV+CSS模板,织梦模板,帝国cms模板,discuz模板,wordpress模板,个人博客论坛模板,上千种免费网页模板下载尽在汇站网.找源码上汇站.huizhanii.com