當前文章的短網址連結為: https://unos.top/rcur
如果用户想搜索“KFC”,他会依次打出“K”、“F”、“C”。如果不加任何限制,前端会瞬间向后端发起 3 次包含 COUNT 和 LIMIT 的数据库物理查询。前 2 次查询(查“K”和查“KF”)不仅对用户毫无意义,还会白白榨干数据库的连接池与 CPU。在大型企业并发场景下,服务器会被这种“键盘轰炸”瞬间拖垮。
防抖 (Debouncing)
它的核心逻辑是:当用户敲下键盘时,前端不立刻发请求,而是开启一个倒计时(比如 500 毫秒)。如果用户在 500 毫秒内又按了下一个按键,倒计时就重新计算。只有当用户的手指离开键盘,停顿超过 500 毫秒后,系统才认为他输入完毕了,此时才真正向服务器发送 1 次请求。
在 MudBlazor 中如何优雅实现?
极其幸运的是,作为顶级的企业级组件库,MudBlazor 直接在底层内置了极其完善的防抖引擎。你完全不需要手写繁琐的 C# Timer 计时器代码。
只需要在现有的 <MudTextField> 中追加两个原生属性:Immediate="true" 和 DebounceInterval="500" 即可。
修改后的代码如下:
Razor CSHTML
<MudTextField T="string"
ValueChanged="@(s => OnSearch(s))"
Immediate="true"
DebounceInterval="500"
Placeholder="搜索..."
Adornment="Adornment.Start"
AdornmentIcon="@Icons.Material.Filled.Search"
IconSize="Size.Medium"
Class="mt-0">
</MudTextField>
参数解析:
Immediate="true":告诉文本框“不要等用户按回车或者鼠标点到别处才触发事件,只要敲击键盘就立刻触发”。DebounceInterval="500":告诉文本框的触发引擎“虽然让你立刻触发,但必须等用户停顿 500 毫秒后,再真正去调用后端的ValueChanged事件”。
