站点图标 神之眼的博客

MudBlazor中通过MudTextField组件实现搜索时添加防抖(Debouncing)机制

當前文章的短網址連結為: 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>

参数解析:

退出移动版