Thema

Lodash stellt zwei Hilfsfunktionen zur Verfügung, um die Häufigkeit zu steuern, mit der eine Funktion ausgeführt wird: throttle und debounce. Hier sind fortgeschrittene Beispiele für jede:

Throttle

Die Funktion throttle stellt sicher, dass eine Funktion höchstens einmal in einem angegebenen Zeitraum aufgerufen wird. Sie ist nützlich, um die Rate von Ereignissen wie Scrollen oder Ändern der Fenstergröße zu begrenzen.

Beispiel

import _ from 'lodash';

const logResize = () => {
    console.log('Window resized');
};

// Create a throttled version of the logResize function
const throttledResize = _.throttle(logResize, 2000); // 2000ms throttle

window.addEventListener('resize', throttledResize);

Erweiterte Optionen

Sie können das Verhalten von throttle mithilfe zusätzlicher Optionen anpassen:

const throttledResize = _.throttle(logResize, 2000, {
    leading: true, // Run on the leading edge
    trailing: false // Don't run on the trailing edge
});

Debounce

Die Funktion debounce erstellt eine gedrosselte Version einer Funktion, die ihre Ausführung verzögert, bis eine bestimmte Zeit seit der letzten Aufruf vergangen ist. Dies ist nützlich für Szenarien wie Formulareingabenvalidierung oder automatisches Speichern.

Beispiel

import _ from 'lodash';

const saveInput = (value) => {
    console.log('Input saved:', value);
};

// Create a debounced version of the saveInput function
const debouncedInputSave = _.debounce(saveInput, 1000); // 1000ms debounce

const inputField = document.getElementById('input');
inputField.addEventListener('input', (event) => {
    debouncedInputSave(event.target.value);
});

Erweiterte Optionen

Sie können debounce auch mit zusätzlichen Parametern anpassen:

const debouncedInputSave = _.debounce(saveInput, 1000, {
    leading: false, // Do not run on the leading edge
    trailing: true // Run on the trailing edge
});

Zusammenfassung

• Throttle: Begrenzt die Ausführung auf höchstens einmal pro angegebenem Intervall.
• Entprellen: Verzögert die Ausführung, bis nach dem letzten Aufruf eine bestimmte Zeit vergangen ist.

Diese erweiterten Optionen ermöglichen eine Feinabstimmung des Verhaltens Ihrer Funktionen, um spezifische Anwendungsfälle zu erfüllen.