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
Miglioramenti agli screen reader e al contrasto in Angular
Installare le Web App site extension tramite una pipeline di Azure DevOps
Generare file PDF da Blazor WebAssembly con iText
Usare una container image come runner di GitHub Actions
Effettuare lo stream della risposta in ASP.NET Core tramite IAsyncEnumerable
Usare le collection expression per inizializzare una lista di oggetti in C#
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
Eseguire una query su SQL Azure tramite un workflow di GitHub
Ottimizzazione dei block template in Angular 17
Utilizzare database e servizi con gli add-on di Container App
Potenziare Azure AI Search con la ricerca vettoriale
Creazione di componenti personalizzati in React.js con Tailwind CSS
I più letti di oggi
- Utilizzare WebAssembly con .NET, ovunque
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- Utilizzare il trigger SQL con le Azure Function
- Ottimizzazione dei block template in Angular 17
- Disabilitare automaticamente un workflow di GitHub (parte 2)