Foto di Chris Liverani su Unsplash

Esecuzione di Debounce vs Throttle vs Queue

Abbiamo un sacco di articoli su Internet che spiegano cosa sono Debouncing, Throttling e qual è la differenza tra loro. Ma la maggior parte che ho trovato erano spesso lunghi, confusi e con esempi di codici complicati (se presenti).

Quindi ho escogitato esempi di codice di lavoro semplificati per ottenere il concetto in un batter d'occhio. Cominciamo con quello più semplice, Debounce.

debounce

Debouncare una funzione è utile quando viene chiamata in modo continuo e vogliamo che venga eseguita dopo un certo periodo se il tempo è trascorso dall'ultima chiamata.

Ciò è utile nei casi in cui vogliamo che la situazione si stabilizzi prima di chiamare il gestore per migliorare le prestazioni. Uno dei migliori esempi di rimbalzo che ho trovato è stato in questo blog di Jhey Tompkins

Per rimandare, potremmo avere alcune funzionalità di salvataggio automatico nella nostra applicazione. Con il salvataggio automatico sull'applicazione prova a salvare lo stato della nostra applicazione ogni volta che l'utente effettua un aggiornamento o ha qualche interazione. Attende 5 secondi per assicurarsi che non vengano effettuati altri aggiornamenti o interazioni prima di salvare lo stato, altrimenti registra il nuovo stato e ripete il processo. Se si verifica un'interazione, reimposta di nuovo il timer per 5 secondi.

funzione debounce (func, waitTime) {
    var timeout;

    funzione return () {
        clearTimeout (timeout);
        timeout = setTimeout (func, waitTime);
    };
};

Questo è quanto è semplice il rimbalzo.

valvola a farfalla

Questa tecnica ha un nome più appropriato. La limitazione di una funzione è utile quando viene chiamata continuamente e vogliamo che venga eseguita una volta ogni x secondi. Un buon esempio di questo potrebbe essere un gestore di scorrimento o un gestore di ridimensionamento, in cui vogliamo eseguire il gestore una volta in un periodo di tempo fisso anche se la funzione viene chiamata continuamente.

throttle di funzione (func, waitTime) {
    var timeout = null;
    var precedente = 0;

    var later = function () {
        precedente = Date.now ();
        timeout = null;
        func ();
    };

    funzione return () {
        var now = Date.now ();
        var rimanente = waitTime - (ora - precedente);
        if (rimanente <= 0 || rimanente> waitTime) {
            if (timeout) {
                clearTimeout (timeout);
            }
            dopo();
        } else if (! timeout) {// null timeout -> nessuna esecuzione in sospeso
            
            timeout = setTimeout (in seguito, rimanente);
        }
    };
};

Extra: Accodamento

Sulle linee di debounce e throttle, è anche possibile mettere in coda le chiamate di funzione. In questo la funzione viene eseguita il numero di volte che viene chiamata, ma prima di ogni esecuzione è previsto un tempo di attesa fisso. Mi è tornato utile di recente quando stavo usando una libreria e mi sono imbattuto in un bug che richiamava più volte una funzione in esso senza ritardi causando un problema. (ci possono essere anche altri casi d'uso :))

coda funzioni (func, waitTime) {
    var funcQueue = [];
    var isWaiting;

    var executeFunc = function (params) {
        isWaiting = true;
        FUNC (params);
        setTimeout (play, waitTime);
    };

    var play = function () {
        isWaiting = false;
        if (funcQueue.length) {
            var params = funcQueue.shift ();
            executeFunc (params);
        }
    };

    funzione di ritorno (parametri) {
        if (isWaiting) {
            funcQueue.push (params);
        } altro {
            executeFunc (params);
        }
    }
};

Concludere

Prima di decidere una tecnica di ottimizzazione, fai un passo indietro e pensa quale darà il miglior risultato per quel caso. Ce n'è sempre uno che sarà più performante.

Non esitate a lasciare una risposta o tweet me con qualsiasi domanda o suggerimento.