debounce-fn

What is debounce-fn?

The debounce-fn npm package provides a simple and efficient way to debounce functions in JavaScript. Debouncing is a technique used to limit the rate at which a function is executed. This is particularly useful for performance optimization in scenarios where a function is called repeatedly in quick succession, such as during window resizing, scrolling, or keypress events.

What are debounce-fn's main functionalities?

Basic Debouncing

This feature allows you to debounce a function with a specified wait time. In this example, the `expensiveFunction` will only be called once every 200 milliseconds, even though `debouncedFunction` is called every 50 milliseconds.

const debounceFn = require('debounce-fn');

const expensiveFunction = () => {
  console.log('Expensive function called');
};

const debouncedFunction = debounceFn(expensiveFunction, { wait: 200 });

// Call the debounced function multiple times
setInterval(debouncedFunction, 50);

Immediate Execution

This feature allows the debounced function to be executed immediately on the first call, and then debounced for subsequent calls. In this example, `logMessage` is executed immediately on the first call, and then debounced for 200 milliseconds.

const debounceFn = require('debounce-fn');

const logMessage = () => {
  console.log('Function executed immediately');
};

const debouncedLogMessage = debounceFn(logMessage, { wait: 200, immediate: true });

debouncedLogMessage(); // Executes immediately
setTimeout(debouncedLogMessage, 100); // Will not execute
setTimeout(debouncedLogMessage, 300); // Executes after 300ms

Cancel Debounced Function

This feature allows you to cancel a debounced function before it gets executed. In this example, `fetchData` is debounced with a wait time of 300 milliseconds, but the second call to `debouncedFetchData.cancel()` cancels the execution.

const debounceFn = require('debounce-fn');

const fetchData = () => {
  console.log('Fetching data');
};

const debouncedFetchData = debounceFn(fetchData, { wait: 300 });

debouncedFetchData();
debouncedFetchData.cancel(); // Cancels the debounced function

Other packages similar to debounce-fn

lodash.debounce

The lodash.debounce package is a popular utility for debouncing functions. It is part of the Lodash library, which provides a wide range of utility functions for JavaScript. Compared to debounce-fn, lodash.debounce offers more configuration options and is widely used in the JavaScript community.

debounce

The debounce package is a lightweight utility for debouncing functions. It provides a simple API similar to debounce-fn but with fewer configuration options. It is suitable for users who need a minimalistic solution for debouncing functions.

throttle-debounce

The throttle-debounce package provides both throttling and debouncing utilities. It is useful for scenarios where you need both functionalities. Compared to debounce-fn, throttle-debounce offers a more comprehensive solution for rate-limiting function executions.

README

debounce-fn

Debounce a function

Install

npm install debounce-fn

Usage

import debounceFunction from 'debounce-fn';

window.onresize = debounceFunction(() => {
	// Do something on window resize
}, {wait: 100});

API

debounceFunction(input, options?)

Returns a debounced function that delays calling the input function until after wait milliseconds have elapsed since the last time the debounced function was called.

It comes with a .cancel() method to cancel any scheduled input function calls.

input

Type: Function

Function to debounce.

options

Type: object

wait

Type: number
Default: 0

Time in milliseconds to wait until the input function is called.

maxWait

Type: number
Default: Infinity

The maximum time the input function is allowed to be delayed before it's invoked.

This can be used to limit the number of calls handled in a constant stream. For example, a media player sending updates every few milliseconds but wants to be handled only once a second.

before

Type: boolean
Default: false

Trigger the function on the leading edge of the wait interval.

For example, can be useful for preventing accidental double-clicks on a "submit" button from firing a second time.

after

Type: boolean
Default: true

Trigger the function on the trailing edge of the wait interval.

Related

• p-debounce - Debounce promise-returning & async functions