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
Pubblicare un pacchetto di NuGet nel feed di GitHub
Ottimizzare serializzazione e deserializzaione tramite le options con System.Text.Json
Utilizzare il tag HTML template
Sfruttare la local cache del browser tramite gli ETag in ASP.NET Core
Utilizzare la parola chiave file nel codice C#
Mostrare una preview durante l'upload di un'immagine in Blazor
Accedere alla console di una Azure Container App
Creare applicazioni distribuite con Azure Container Apps e Dapr
Creare automaticamente una pipeline YAML da una sua definizione in Azure DevOps
Raggruppare i parametri di una minimal API in un singolo oggetto in ASP.NET Core
Sfruttare i tag nell'output cache di ASP.NET Core 7
Eseguire chiamate hedging gRPC con ASP.NET Core 6
I più letti di oggi
- Taggare la output cache in base al routing in ASP.NET Core
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- .NET Conference Italia 2022 - Milano e Online
- Silverlight su mobile: Nokia
- Visual Studio 2010 e .NET Framework 4.0: beta 2 e data di release RTM
- Anteprima del Service Pack 1 di WCF RIA Services: spunta il supporto all'italiano
- Disponibile al download la versione finale di Internet Explorer 9
- Windows Phone 'Mango' beta presto nei device ufficiali?