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
Creare alias per tipi generici e tuple in C#
Configurare policy CORS in Azure Container Apps
Utilizzare le Cache API di JavaScript per salvare elementi nella cache del browser
Elencare le container images installate in un cluster di Kubernetes
Generare token per autenicarsi sulle API di GitHub
Creare moduli CSS in React
Gestire liste di tipi semplici con Entity Framework Core
Recuperare un elemento inserito nella cache del browser tramite API JavaScript
Installare le Web App site extension tramite una pipeline di Azure DevOps
Limitare le richieste lato server con l'interactive routing di Blazor 8
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Miglioramenti nell'accessibilità con Angular CDK