博客

如果用户想搜索“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 事件”。