当前位置：首页 > news >正文

Flutter中防抖动和节流策略

news 2025/7/21 15:05:48

什么是防抖和节流？

函数节流（throttle）与函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象
是应对频繁触发事件的优化方案。

防抖（debounce）

防抖就是防止抖动，避免事件的重复触发。
防抖可以概括为触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。
n 秒后执行该事件，若在n秒后被重复触发，则重新计时
简单的说，如果某一事件被连续快速地触发多次，只会执行最后那一次。

使用场景

· input 搜索录入，用户不断录入值
· window触发resize事件
· mousemove 鼠标滑动事件
· scroll滚动条滑动请求、上拉触底加载更多
· 表单验证，按钮的提交事件

节流（throttle）

节流就是减少流量，将频繁触发的事件减少，并每隔一段时间执行。会控制事件触发的频率。所以节流会稀释函数的执行频率。
n 秒内只运行一次，若在n秒内重复触发，只有一次生效。
如果连续快速地触发多次，在规定的时间内，只触发一次。如限制1s，则1s内只执行一次，无论怎样，都在会1s内执行相应的操作。

使用场景

· 获取验证码
·鼠标不断点击触发，mousedown(规定时间内只触发一次)
·mousemove 鼠标滑动事件
·滚动条滑动请求、上拉触底加载更多
·搜索、提交等按钮功能

防抖和节流之间的差别:

相同点：目的都是，降低回调函数的执行频率，节省计算资源

不同点：
· 防抖，是在一段连续操作结束之后，处理回调
· 节流，是在一段连续操作中，每一段时间只执行一次，在频率较高的事件中使用来提高性能。
·防抖用于无法预知的用户主动行为，如用户输入内容去服务端动态搜索结果。用户打字的速度等是无法预知的，具有非规律性。
·节流可用于一些非用户主动行为或者可预知的用户主动行为，如用户滑动商品橱窗时发送埋点请求、滑动固定的高度是已知的逻辑，具有规律性。
·防抖是关注于最后一次的事件触发，而节流则是在规定的时间里只执行一次。
·防抖是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行

防抖以一个实时搜索框为例当用户在输入框中进行实时搜索时，频繁调用接口可能会导致性能问题和不必要的网络请求。为了优化这种情况，通常可以使用防抖动策略来减少接口调用的频率。

使用 flutter_hooks 包可以更容易地实现防抖动功能。

flutter_hooks: ^0.18.0
dio: ^5.0.2

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:dio/dio.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('Debounced Search'),),body: SearchScreen(),),);}
}class SearchScreen extends HookWidget {@overrideWidget build(BuildContext context) {final searchController = useTextEditingController();final debouncedSearch = useMemoized(() {return _DebouncedSearch(duration: Duration(milliseconds: 500));});useEffect(() {void listener() {debouncedSearch.run(() {// 这里调用接口_performSearch(searchController.text);});}searchController.addListener(listener);return () => searchController.removeListener(listener);}, [searchController]);return Padding(padding: const EdgeInsets.all(8.0),child: Column(children: [TextField(controller: searchController,decoration: InputDecoration(hintText: 'Search...',),),Expanded(child: ListView(children: [// 搜索结果展示],),),],),);}void _performSearch(String query) async {if (query.isEmpty) return;try {// 模拟调用接口print('Searching for $query');// 在这里用 Dio 或其他包实际调用接口var response = await Dio().get('https://api.example.com/search', queryParameters: {'q': query});print(response.data);} catch (e) {print('Search error: $e');}}
}class _DebouncedSearch {final Duration duration;Timer? _timer;_DebouncedSearch({required this.duration});void run(void Function() action) {_timer?.cancel();_timer = Timer(duration, action);}
}