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上并没有做任何处理,比如做禁用样式、动画样式等
网友评论