Onderwerp

Lodash biedt twee hulpfuncties om de snelheid waarmee een functie wordt uitgevoerd te regelen: throttle en debounce. Hier zijn geavanceerde voorbeelden voor elk:

Throttle

De throttle-functie zorgt ervoor dat een functie maximaal eenmaal wordt aangeroepen in een bepaalde tijdsperiode. Het is nuttig voor het beperken van het aantal gebeurtenissen zoals scrollen of het aanpassen van de grootte.

Voorbeeld

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

Geavanceerde opties

Je kunt het gedrag van throttle aanpassen met extra opties:

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

Debounce

De debounce-functie maakt een gedebounce versie van een functie die de uitvoering uitstelt totdat een bepaalde tijd is verstreken sinds de laatste keer dat de functie werd aangeroepen. Dit is nuttig voor scenario's zoals formulierinvoer validatie of automatisch opslaan.

Voorbeeld

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

Geavanceerde opties

Je kunt debounce ook aanpassen met extra parameters:

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

Samenvatting

• Throttle: Beperkt de uitvoering tot maximaal eenmaal per opgegeven tijdsinterval.
• Debounce: Stelt de uitvoering uit totdat de laatste aanroep gedurende een gespecificeerde tijd heeft plaatsgevonden.

Met deze geavanceerde opties kun je het gedrag van je functies fijn afstemmen om aan specifieke gebruikssituaties te voldoen.