Thread

Lodash provides two utility functions for controlling the rate at which a function is executed: throttle and debounce. Here are advanced examples for each:

Throttle

The throttle function ensures that a function is called at most once in a specified period of time. It's useful for limiting the rate of events such as scroll or resize.

Example

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

Advanced Options

You can customize the behavior of throttle using additional options:

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

Debounce

The debounce function creates a debounced version of a function that delays its execution until after a specified time has elapsed since it was last invoked. This is useful for scenarios like form input validation or auto-saving.

Example

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

Advanced Options

You can also customize debounce with additional parameters:

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

Summary

• Throttle: Limits the execution to at most once per specified time interval.
• Debounce: Delays execution until after the last call has been made for a specified time.

These advanced options allow for fine-tuning the behavior of your functions to suit specific use cases.