Foto door Chris Liverani op Unsplash

Debounce versus Throttle versus Queue uitvoering

We hebben heel veel artikelen op internet waarin wordt uitgelegd wat Debouncing en Throttling zijn en wat het verschil is. Maar de meeste vond ik vaak lang, verwarrend en met ingewikkelde codevoorbeelden (indien aanwezig).

Dus heb ik vereenvoudigde werkcodevoorbeelden bedacht om het concept in een handomdraai te krijgen. Laten we beginnen met de gemakkelijkere, Debounce.

ontdendering

Een functie debouncen is handig wanneer deze continu wordt aangeroepen en we willen dat deze na een bepaalde periode wordt uitgevoerd als de tijd is verstreken sinds de laatste oproep.

Dit is handig als we de situatie willen stabiliseren voordat we de handler bellen om de prestaties te verbeteren. Een van de beste voorbeelden van debounce die ik vond, was in deze blog van Jhey Tompkins

Voor debouncering kunnen we een functie voor automatisch opslaan in onze toepassing hebben. Met automatisch opslaan probeert de toepassing de status van onze toepassing op te slaan telkens wanneer de gebruiker een update uitvoert of enige interactie heeft. Het wacht 5 seconden om ervoor te zorgen dat er geen andere updates of interacties worden gemaakt voordat het de status opslaat, anders registreert het de nieuwe status en herhaalt het proces. Als er interactie plaatsvindt, wordt de timer opnieuw gedurende 5 seconden gereset.

functie debounce (func, waitTime) {
    var time-out;

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

Dat is alles, zo eenvoudig kan debouncen zijn.

smoorklep

Deze techniek wordt toepasselijker genoemd. Throttling van een functie is handig wanneer deze continu wordt aangeroepen en we willen dat deze om de x seconden wordt uitgevoerd. Een goed voorbeeld hiervan is een scroll-handler of een formaat-handler, waarbij we de handler een keer in een vaste periode willen uitvoeren, zelfs als de functie continu wordt aangeroepen.

functie throttle (func, waitTime) {
    var timeout = null;
    var vorige = 0;

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

    retourfunctie () {
        var now = Date.now ();
        var resterende = wachttijd - (nu - vorige);
        if (resterend <= 0 || rest> waitTime) {
            if (time-out) {
                clearTimeout (timeout);
            }
            later();
        } anders if (! timeout) {// null timeout -> geen openstaande uitvoering
            
            timeout = setTimeout (later, resterend);
        }
    };
};

Extra: wachtrij

Op de lijnen van debounce en throttle kunnen functieaanroepen ook in de wachtrij worden geplaatst. Hierin wordt de functie het aantal keren uitgevoerd dat deze wordt aangeroepen, maar er is een vaste wachttijd voor elke uitvoering. Het kwam onlangs van pas voor mij toen ik een bibliotheek gebruikte en een fout tegenkwam die meerdere keren een functie aanriep zonder dat een vertraging een probleem veroorzaakte. (er kunnen ook andere use cases zijn :))

functie wachtrij (func, waitTime) {
    var funcQueue = [];
    var isWachten;

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

    retourfunctie (params) {
        if (isWaiting) {
            funcQueue.push (params);
        } anders {
            executeFunc (params);
        }
    }
};

Concluderen

Voordat u een optimalisatietechniek kiest, neemt u een stap terug en bedenkt u welke het beste resultaat voor die zaak oplevert. Er is er altijd een die meer performant zal zijn.

Aarzel niet om een ​​reactie achter te laten of me te tweeten met vragen of suggesties.