Blazor Textfield Oninput User Typing Delay

问题

How can I add a delay to an event (OnInput) in Blazor ?
For example, if a user is typing in the text field and you want to wait until the user has finished typing.

Blazor.Templates::3.0.0-preview8.19405.7

Code:

@page "/"
<input type="text" @bind="Data" @oninput="OnInputHandler"/>
<p>@Data</p>

@code {    
    public string Data { get; set; }   

    public void OnInputHandler(UIChangeEventArgs e)
    {
        Data = e.Value.ToString();
    }    
}

回答1:

Solution:

There is no single solution to your question. The following code is just one approach. Take a look and adapt it to your requirements. The code resets a timer on each keyup, only last timer raises the OnUserFinish event.

@using System.Timers;
...
<input type="text" @bind-value="Data" @bind-value:event="oninput" 
       @onkeyup="@HandleKeyUp"/>
<p>@Data2</p>

@code {
    public string Data { get; set; }   
    public string Data2 { get; set; }  
    private System.Timers.Timer aTimer;

    protected override void OnInitialized()
    {
        aTimer = new System.Timers.Timer(1000);
        aTimer.Elapsed += OnUserFinish;
        aTimer.AutoReset = false;
    }

    void HandleKeyUp(KeyboardEventArgs e)
    {
        // remove previous one
        aTimer.Stop();

        // new timer
        aTimer.Start();        
    }    

    private void OnUserFinish(Object source, ElapsedEventArgs e)
    {
        InvokeAsync( () =>
          {
            Data2 = $"User has finished: {Data}";
            StateHasChanged();
          });
    }
}

Use case:

One example of use case of this code is avoiding backend requests, because the request is not sent until user stops typing.

Running:

回答2:

I'll sharpen your question: The user is typing into a search field, and you wisely don't want to send, say, Http request to the server, at each hit, but to wait until some conditions are fulfilled, like length of search terms, etc.

This is a concept that is related to debounce and throttling. Theses are mechanisms used ordinarily in Angular, as for instance.

More than a year ago I've asked a similar question in github. Read the response: https://github.com/aspnet/Blazor/issues/925

It was 15 months ago. I'm sure this domain is much looked at by the community. However, the following is by the Blazor team: https://github.com/aspnet/AspNetCore/issues/10522

Note: * "wait until the user has finished typing" cannot constitutes a state that you can objectify to condition the delay. How can you know that the user is not going to type any longer...

If you just want to await the execution of your code for a while, before your component display the entered text in <p>@Data</p>, you can simply use something like this:

@code {
public string Data { get; set; }
```
public async Task OnInputHandler(UIChangeEventArgs e)
{
        await Task.Delay(2000);
        Data = e.Value.ToString();
}    
}  
```

Hope this helps...

来源：https://stackoverflow.com/questions/57533970/blazor-textfield-oninput-user-typing-delay

标签

throttling

blazor

blazor-server-side

debounce