美文网首页FlutterFlutterflutter
Flutter中的节流与防抖(过滤重复点击)

Flutter中的节流与防抖(过滤重复点击)

作者: xiaoxiami003 | 来源:发表于2020-07-03 14:04 被阅读0次

    Flutter中的节流与防抖

    背景

    在一些计算较为复杂、操作较为耗时或者操作为引起页面重绘的场景,如果事件触发的频率毫无限制,除了带来性能上的负担,还会导致糟糕的用户体验。如:根据输入框输入的内容向服务端查询相关文章,用户多次点击收藏按钮……

    防抖(debounce)

    在触发事件时,不立即执行目标操作,而是给出一个延迟的时间,在该时间范围内如果再次触发了事件,则重置延迟时间,直到延迟时间结束才会执行目标操作。

    示例

    如设定延迟时间为500ms,

    • 如果在500ms内没有再次触发事件,则执行目标操作
    • 如果在500ms内再次触发了事件,则重置延迟时间,重新开始500ms的延迟,直到500ms结束执行目标操作
    效果

    连续点击收藏按钮,停止点击时才会执行”收藏/取消收藏“操作,只会执行一次”收藏/取消收藏“操作

    image
    示例代码
    // debounce.dart
    
    import 'dart:async';
    
    /// 函数防抖
    ///
    /// [func]: 要执行的方法
    /// [delay]: 要迟延的时长
    Function debounce(
      Function func, [
      Duration delay = const Duration(milliseconds: 2000),
    ]) {
      Timer timer;
      Function target = () {
        if (timer?.isActive ?? false) {
          timer?.cancel();
        }
        timer = Timer(delay, () {
          func?.call();
        });
      };
      return target;
    }
    
    // debounce_page.dart
    
      Text(
        '$_count',
        style: Theme.of(context).textTheme.display1,
      ),
      Center(
        child: RaisedButton.icon(
          icon: Icon(Icons.add),
          label: Text('防抖'),
          onPressed: debounce(() {
            if (!mounted) {
              return;
            }
            setState(() {
              _count++;
            });
          }),
        ),
      ),
    

    节流(throttle)

    在触发事件时,立即执行目标操作,同时给出一个延迟的时间,在该时间范围内如果再次触发了事件,该次事件会被忽略,直到超过该时间范围后触发事件才会被处理。

    示例

    如设定延迟时间为500ms,

    • 如果在500ms内再次触发事件,该事件会被忽略
    • 如果500ms延迟结束,则事件不会被忽略,触发事件会立即执行目标操作,并再次开启500ms延迟
    效果

    连续点击收藏按钮,在第一次点击时会立即执行”收藏/取消收藏“操作,在本次操作执行完成前的多次点击会被忽略,只会执行一次”收藏/取消收藏“操作。

    image
    示例代码
    // throttle.dart
    
    import 'dart:async';
    
    /// 函数节流
    ///
    /// [func]: 要执行的方法
    Function throttle(
      Future Function() func,
    ) {
      if (func == null) {
        return func;
      }
      bool enable = true;
      Function target = () {
        if (enable == true) {
          enable = false;
          func().then((_) {
            enable = true;
          });
        }
      };
      return target;
    }
    
    
    // throttle_page.dart
    Text(
      '$_count',
      style: Theme.of(context).textTheme.display1,
    ),
    Center(
      child: RaisedButton.icon(
        icon: Icon(Icons.add),
        label: Text('节流,耗时操作2s'),
        onPressed: throttle(() async {
          await Future.delayed(Duration(milliseconds: 2000));
          if (!mounted) {
            return;
          }
          setState(() {
            _count++;
          });
        }),
      ),
    ),
    Divider(
      height: 8,
    ),
    Text(
      '$_count3',
      style: Theme.of(context).textTheme.display1,
    ),
    Center(
      child: RaisedButton.icon(
        icon: Icon(Icons.add),
        label: Text('不节流,耗时操作2s'),
        onPressed: () async {
          await Future.delayed(Duration(milliseconds: 2000));
          if (!mounted) {
            return;
          }
          setState(() {
            _count3++;
          });
        },
      ),
    ),
    

    待解决

    部分场景,如收藏等一些按钮,在连续多次点击时,上述方案可以过滤逻辑上的重复问题,但在UI上并没有做任何处理,比如做禁用样式、动画样式等

    相关文章

      网友评论

        本文标题:Flutter中的节流与防抖(过滤重复点击)

        本文链接:https://www.haomeiwen.com/subject/qtjsqktx.html