Foto von Chris Liverani auf Unsplash

Debounce vs Throttle vs Queue Ausführung

Wir haben jede Menge Artikel im Internet, die erklären, was Debouncing, Throttling und was der Unterschied zwischen ihnen ist. Aber die meisten, die ich fand, waren oft lang, verwirrend und mit komplizierten Codebeispielen (falls vorhanden).

Deshalb habe ich vereinfachte Arbeitscode-Beispiele für sie entwickelt, um das Konzept im Handumdrehen zu erstellen. Fangen wir mit dem Einfacheren an, Debounce.

Entprellen

Das Entprellen einer Funktion ist praktisch, wenn sie fortlaufend aufgerufen wird und nach einer bestimmten Zeit ausgeführt werden soll, wenn seit dem letzten Aufruf Zeit verstrichen ist.

Dies ist praktisch, wenn sich die Situation stabilisieren soll, bevor Sie den Handler anrufen, um die Leistung zu verbessern. Eines der besten Beispiele für Entprellung fand ich in diesem Blog von Jhey Tompkins

Zum Entprellen können wir in unserer Anwendung eine Funktion zum automatischen Speichern verwenden. Beim automatischen Speichern der Anwendung wird versucht, den Status der Anwendung jedes Mal zu speichern, wenn der Benutzer eine Aktualisierung vornimmt oder eine Interaktion ausführt. Es wartet 5 Sekunden, um sicherzustellen, dass keine weiteren Aktualisierungen oder Interaktionen vorgenommen werden, bevor der Status gespeichert wird. Andernfalls zeichnet es den neuen Status auf und wiederholt den Vorgang. Wenn eine Interaktion auftritt, wird der Timer erneut für 5 Sekunden zurückgesetzt.

Funktion entprellen (func, waitTime) {
    var timeout;

    Rückgabefunktion () {
        clearTimeout (Zeitüberschreitung);
        timeout = setTimeout (func, waitTime);
    };
};

So einfach kann Debounce sein.

Drosseln

Diese Technik wird passender benannt. Das Drosseln einer Funktion ist praktisch, wenn sie kontinuierlich aufgerufen wird und alle x Sekunden ausgeführt werden soll. Ein gutes Beispiel hierfür wäre ein Scroll-Handler oder ein Resize-Handler, bei dem der Handler einmal in einem festgelegten Zeitraum ausgeführt werden soll, auch wenn die Funktion kontinuierlich aufgerufen wird.

Funktionsdrossel (func, waitTime) {
    var timeout = null;
    var previous = 0;

    var later = function () {
        previous = Date.now ();
        Zeitüberschreitung = null;
        func ();
    };

    Rückgabefunktion () {
        var now = Date.now ();
        var residual = waitTime - (jetzt - vorhergehend);
        if (verbleibende <= 0 || verbleibende> Wartezeit) {
            if (timeout) {
                clearTimeout (Zeitüberschreitung);
            }
            später();
        } else if (! timeout) {// null timeout -> keine ausstehende Ausführung
            
            timeout = setTimeout (später, verbleibend);
        }
    };
};

Extra: Anstehen

In den Zeilen Debounce und Throttle können auch Funktionsaufrufe in die Warteschlange gestellt werden. In diesem Fall wird die Funktion so oft ausgeführt, wie sie aufgerufen wurde, es gibt jedoch eine feste Wartezeit vor jeder Ausführung. Es hat sich kürzlich für mich als nützlich erwiesen, als ich eine Bibliothek benutzte und auf einen Fehler stieß, der eine Funktion darin mehrere Male aufrief, ohne dass eine Verzögerung ein Problem verursachte. (Es kann auch andere Anwendungsfälle geben :))

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

    Rückgabefunktion (params) {
        if (isWaiting) {
            funcQueue.push (params);
        } else {
            executeFunc (params);
        }
    }
};

Schlussfolgern

Machen Sie einen Schritt zurück, bevor Sie sich für eine Optimierungstechnik entscheiden, und überlegen Sie, welche für diesen Fall das beste Ergebnis liefert. Es gibt immer einen, der leistungsfähiger ist.

Bitte hinterlassen Sie eine Antwort oder twittern Sie mich mit Fragen oder Anregungen.