Home > widget-integration > FilterHelper > debounce

FilterHelper.debounce() method

Creates a debounced version of a function that delays execution until after a specified time.

Useful for optimizing performance by delaying expensive operations (like API calls or DOM updates) until after rapid consecutive calls have finished. The timer resets on each new invocation. Override this method to customize debounce behavior or add logging for debugging.

Signature:

debounce<T extends (...args: any[]) => void>(fn: T, delay?: number): (this: ThisParameterType<T>, ...args: Parameters<T>) => void;

Parameters

Parameter

Type

Description

fn

T

The function to debounce

delay

number

(Optional) Delay in milliseconds (default: 300ms)

Returns:

(this: ThisParameterType<T>, ...args: Parameters<T>) => void

Debounced function that delays execution

Example 1

Basic usage:

const debouncedSearch = this.filterHelper.debounce(() => {
  this.performSearch();
}, 500);

Example 2

Extend to add execution tracking:

window.boostWidgetIntegration.extend('FilterHelper', (FilterHelper) => {
  return class CustomFilterHelper extends FilterHelper {
    debounce(fn, delay = 300) {
      const debouncedFn = super.debounce(fn, delay);
      return (...args) => {
        console.log('Debounced function called, will execute in', delay, 'ms');
        return debouncedFn(...args);
      };
    }
  };
});