In un precedente script (https://www.aspitalia.com/script/1421/Gestire-Timing-Eventi-Interno-Applicazione-Blazor.aspx) abbiamo parlato della gestione degli eventi javascript per evitare un continuo refresh dell'interfaccia utente. In quell'occasione abbiamo preso in considerazione una metodologia che si basava sul debounce: l'esecuzione dell'evento veniva annullata nel caso in cui un altro evento, della stessa tipologia, fosse stato creato entro un determinato intervallo di tempo dall'occorrenza precedente; consentendoci di ridurre i cicli di aggiornamento UI di Blazor, garantendo il mantenimento di prestazioni ottimali.
Il debounce non è però l'unica modalità con cui possiamo gestire gli eventi, possiamo utilizzare un meccaniscmo definito throttling, nel quale, in un dato intervallo, tutti gli eventi creati avranno un tempo di attesa per l'esecuzione pari alla differenza tra l'intervallo originario e il tempo trascorso dall'emissione dell'evento precedente.
Portiamo un esempio reale per capirne meglio il funzionamento: se scegliamo una logica di gestione tramite throttling a 500ms, siamo sicuri che ogni 500ms dalla prima occasione, verrà emesso un nuovo evento. Questo fa si che, a differenza del debounce, nell'immissione di un testo, non si attenda la fine dell'inserimento, ma ad intervalli regolari il valore inserito verrà consegnato a Blazor, che effettuerà l'aggiornamento dell'interfaccia.
Per riuscire ad inserire la gestione tramite throttling all'interno del codice precedentemente creato, rechiamoci nel file wwwroot/js/events.js ed aggiungiamo la seguente funzione javascript e il relativo export.
export function throttleEvent(htmlElement, eventName, delay) { registerEvent(htmlElement, eventName, delay, throttle); } function throttle(func, wait) { var context, args, result; var timeout = null; var previous = 0; var later = function () { previous = Date.now(); timeout = null; result = func.apply(context, args); if (!timeout) context = args = null; }; return function () { var now = Date.now(); if (!previous) previous = now; var remaining = wait - (now - previous); context = this; args = arguments; if (!timeout) { timeout = setTimeout(later, remaining); } return result; }; };
Come per il debounce, dovremmo chiamare la funzione throttleEvent fornendo i parametri richiesti. Per mantenere il codice più pulito possibile, aggiungiamo un extension method alla classe EventExtensions.
public static class EventExtensions { public static async Task ThrottleEvent(this IJSRuntime jsRuntime, ElementReference element, string eventName, TimeSpan delay) { await using var module = await jsRuntime.InvokeAsync<IJSObjectReference>("import", "./events.js"); await module.InvokeVoidAsync("throttleEvent", element, eventName, (long)delay.TotalMilliseconds); } }
Infine, sostituendo DebounceEvent con ThrottleEvent, all'interno della pagina .razor, la lista verrà aggiornata regolarmente, man mano che l'utente inserirà del testo nella controllo di input e non più al termine.
@inject IJSRuntime JSRuntime <input @ref="searchInput" class="form-control" @bind-value="SearchText" @bind-value:event="oninput"/> <Virtualize Items="@FilteredList" Context="weather"> @weather.Location </Virtualize> @code{ ElementReference searchInput; public string SearchText = ""; IList<WeatherForecast> FilteredList { get => originalList.Where( weather => weather.Location.Contains(SearchText)).ToList(); } IList<WeatherForecast> originalList = new List<WeatherForecast>(); protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await JSRuntime.ThrottleEvent(searchInput, "input", TimeSpan.FromMilliseconds(500)); } } }
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Aggiungere interattività lato server in Blazor 8
Eseguire operazioni con timeout in React
Miglioramenti agli screen reader e al contrasto in Angular
Routing statico e PreRendering in una Blazor Web App
Eseguire operazioni sui blob con Azure Storage Actions
Gestire errori funzionali tramite exception in ASP.NET Core Web API
Generare file per il download da Blazor WebAssembly
Load test di ASP.NET Core con k6
Copiare automaticamente le secret tra più repository di GitHub
Implementare l'infinite scroll con QuickGrid in Blazor Server
Effettuare il deploy di immagini solo da container registry approvati in Kubernetes
I più letti di oggi
- Utilizzare Docker Compose con Azure App Service
- Utilizzare QuickGrid di Blazor con Entity Framework
- Modernizzare le applicazioni WPF e Windows Forms con Blazor
- ASP 3 per esempi
- annunciato #netstandard 2.1. .NET Core lo supporterà a partire da #netcore3, così come le prossime versione di #xamarin, #mono e #unity.il supporto per #netfx 4.8, invece, non ci sarà. https://aspit.co/bq2