JavaScriptmediumJavaScript

Debounce Function

Prevents a function from being called too frequently, executes only the last call

#function #performance #optimization #event

The problem

When handling window resize, input events, need to prevent functions from being called too frequently

The solution

JavaScript

function debounce(func, delay) {
  let timeoutId;
  
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

Parameters

funcfunction

Function to debounce

delaynumber

Delay time in milliseconds

Put it to work

Example

// Handle window resize events
const handleResize = debounce(() => {
  console.log('Window resized');
}, 300);

window.addEventListener('resize', handleResize);

Keep going

Related moves.

01JS↗

Throttle Function

Limits a function to be executed only once per specified time period

function throttle(func, limit) {
  let inThrottle;
  
  return function(...args) {

#function#performance

medium

02JS↗

Debounce with Immediate Option

Debounce function with leading edge (immediate) and trailing edge options

function debounce(func, wait, options = {}) {
  const { leading = false, trailing = true, maxWait } = options;
  let timeoutId, lastCallTime, lastInvokeTime, result;
  let lastArgs, lastThis;

#debounce#performance

medium

03JS↗

Memoization Function

Cache function results to improve performance

function memoize(func, resolver) {
  const cache = new Map();
  
  return function(...args) {

#memoization#cache

medium