背景
在一些计算较为复杂、操作较为耗时或者操作为引起页面重绘的场景，如果事件触发的频率毫无限制，除了带来性能上的负担，还会导致糟糕的用户体验。如：根据输入框输入的内容向服务端查询相关文章，用户多次点击收藏按钮……
防抖（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++; }); }, ), ),
作者：xiaoxiami003 链接：https://www.jianshu.com/p/2b70ef340e82 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
