c# - 避免用户在输入文本字段框中输入延迟 mudblazor blazor c#

Question

我有一个带有分页/全局搜索功能的 mud blazor 网格。当我在本地测试时，搜索功能按预期工作，即只要用户输入内容，它就会过滤掉网格，而且速度似乎非常快。当我将它托管到开发/阶段服务器时会出现问题。用户输入被延迟。此外，如果输入缓慢，它也能正常工作。例如，如果我尝试在搜索框中快速输入“test”，那么它总是会漏掉 1 或 2 个字符并将其打印为“tst”，即使我已经仔细输入了所有字符。按退格键时指针会非常频繁地闪烁。

我尝试清除缓存但在托管后仍然无法正常工作，而在我的本地环境中执行上述操作时没有出现此类问题。

我无法弄清楚我做错了什么，为什么性能会受到影响。注意:我立即从数据库加载数据集(在 onInitialized() 内)

代码:

Index.razor

<MudTable Items="CustomersWithOrderInfo" ServerData="new Func<TableState, Task<TableData<Data.Models.CustomerOrderInfoDTO>>>(LoadCustomers)" FixedHeader="true" FixedFooter="true" Class="table table-hover" Style="box-shadow:none !important;" @ref="table" Height="530px">
                        <ToolBarContent>
                            <div class="input-group mb-3" style="width:35%;">
                                <input type="text" class="form-control" placeholder="Search" value="@searchString" @oninput="@FilterChanged">
                                <div class="input-group-append">
                                    <span class="input-group-text bg-primary" id="basic-addon1"><i class="fa fa-search fa-lg fa-charade text-white" style="font-size:small;"></i></span>
                                </div>
                            </div>
                            <br />
                        </ToolBarContent>
                        <HeaderContent>
                            <MudTh Style="font-weight: bold;width:12%;">Customer Id</MudTh>
                            <MudTh Style="font-weight: bold;width:13%">Customer Name</MudTh>
                             ....
                            <MudTh Style="font-weight: bold;width:8%;">Actions</MudTh>
                        </HeaderContent>
                        <RowTemplate>
                                                 
                            <MudTd DataLabel="Customer Id">@context.CustomerId</MudTd>
                            <MudTd DataLabel="Customer Name">@context.CustomerName</MudTd>
                             ....
                            <MudTd DataLabel="Active">@context.IsActive</MudTd>
                            <MudTd DataLabel="">
                            
                               ...
                            </MudTd>
                        </RowTemplate>
                        <PagerContent>
                            <MudTablePager PageSizeOptions="pageSizes" />
                        </PagerContent>
                    </MudTable>

索引库.cs

 protected void FilterChanged(ChangeEventArgs args)
        {
            searchString = args.Value.ToString();
            table.ReloadServerData();
        }
protected async Task<TableData<CustomerOrderInfoDTO>> LoadCustomers(TableState tableState)
        {
            IEnumerable<CustomerOrderInfoDTO> data = CustomersWithOrderInfo.OrderByDescending(q => q.CustomerId);
            data = data.Where(p =>
            {
                if (string.IsNullOrWhiteSpace(searchString))
                    return true;
               
                if (!string.IsNullOrEmpty(p.CustomerName) && p.CustomerName.Contains(searchString, StringComparison.OrdinalIgnoreCase))
                    return true;
               
                if ($"{p.CustomerId}".Contains(searchString))
                    return true;
                return false;

            }).ToArray();
            totalItems = data.Count();
            pagedData = data.Skip(tableState.Page * tableState.PageSize).Take(tableState.PageSize).ToArray();
            return new TableData<CustomerOrderInfoDTO>() { TotalItems = totalItems, Items = pagedData };
        }

Answer 1

我认为这是因为您使用了@oninput="@FilterChanged"，这意味着每次您键入一个字符时都会执行FilterChanged。由于 FilterChanged 是一个需要花费一些时间的函数，因此这会在执行时对 UI 造成一些延迟。

尝试用 @onchange="@FilterChanged" 替换 @oninput="@FilterChanged"。这将在元素失去焦点时执行 FilterChanged。

另一种可能性是添加一个按钮或在按下 Enter 键时执行。

参见 doc .