[JavaScript知识库]稳住了，别抖 —— 看如何使用 GetX 做点击事件防抖动

前言

在前后端对接过程中，经常会遇到快速重复点击导致重复请求的问题，如果处理不好一方面容易产生垃圾数据，另一方面还增加了很多无谓请求，导致服务器请求数量过多。在 GetX中，针对这种场景提供了一个Worker类以及几个勾子函数来解决这类问题。

场景1：疯狂点击

举个例子，某些购物 App 会提供互动游戏，通过在限定时间内点击的次数来刷红包或优惠券（都是套路??），这个时候我们会疯狂地点击天上掉下来的红包或者锦鲤，试想如果每次点击都请求后端，那如果是上万人都这么点击，服务器都会被点崩！对于这种情况，GetX 提供了一个 debounce 的勾子函数，这个函数在限定的时间内只会执行一次指定的回调动作：

Worker debounce<T>(
  RxInterface<T> listener,
  WorkerCallback<T> callback, {
  Duration? time,
  Function? onError,
  void Function()? onDone,
  bool? cancelOnError,
});

其中 listener 为状态变量，callback 为状态变量 listener 改变时的回调方法，time为限定时间。三个参数构成的结果是在小于time的时间内，如果listener持续在变化的话就不会执行 callback

了解本专栏 订阅专栏 解锁全文 学习会员免费看 赠一年