Flutter实现同一时间产生多次事件,最后一次有效

656 阅读1分钟

前言

在使用搜索栏时,我们需要监听用户输入的内容,然后进行Server请求,在这个过程中,用户可能会产生多次输入事件,导致不断的请求Server,这个时候就需要下面的代码: 直接贴代码:

import 'dart:async';

const Duration _kDuration = const Duration(milliseconds: 400);

class PreventRepeatedEvent {
  StreamController _controller = StreamController();
  StreamSubscription _subscription;
  Timer _timer;

  void addEventListener(void dataCall(dynamic data)) {
    _subscription = _controller.stream.listen((event) {
      dataCall(event);
    });
  }

  void sendEvent(dynamic data) {
    if (_timer != null) {
      _timer.cancel();
    }
    _timer = Timer(_kDuration, () {
      if(!_controller.isClosed){
        _controller.add(data);
      }
    });
  }

  void cancel() {
    _controller.close();
    _subscription.cancel();
  }
}

使用:

  TextEditingController searchController = TextEditingController();
  FocusNode searchFocusNode = FocusNode();
  PreventRepeatedEvent repeatedEvent;

  @override
  void initState() {
    super.initState();
    repeatedEvent = PreventRepeatedEvent();
    repeatedEvent.addEventListener(_handleInput);
    searchController.addListener(_handleSearchInput);
  }

  void _handleSearchInput() {
    repeatedEvent.sendEvent(searchController.text);
  }

  @override
  void dispose() {
    super.dispose();
    searchController.dispose();
    searchFocusNode.dispose();
    repeatedEvent?.cancel();
  }

  void unFocus() {
    searchFocusNode.unfocus();
  }

  void searchRefreshData(data){
  // 这里可以获取到最后一次的data,进行Server请求
  }

  void _handleInput(data) {
    searchRefreshData(data);
  }