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));
        }
    }
}