debounce.md

title	tags	author_title	author_url	author_image_url	description	image
debounce	function intermediate	Deepak Vishwakarma	https://github.com/deepakshrma	https://avatars2.githubusercontent.com/u/7682731?s=400	Implementation of "debounce" in typescript, javascript and deno.	https://www.positronx.io/wp-content/uploads/2018/11/positronx-banner-1152-1.jpg

Creates a debounced function that delays invoking the provided function until at least ms milliseconds have elapsed since the last time it was invoked.

Each time the debounced function is invoked, clear the current pending timeout with clearTimeout() and use setTimeout() to create a new timeout that delays invoking the function until at least ms milliseconds has elapsed. Use Function.prototype.apply() to apply the this context to the function and provide the necessary arguments. Omit the second argument, ms, to set the timeout at a default of 0 ms.

const debounce = (fn: Function, ms = 300) => {
  let timeoutId: ReturnType<typeof setTimeout>;
  return function (this: any, ...args: any[]) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => fn.apply(this, args), ms);
  };
};

window.addEventListener(
  "resize",
  debounce(() => {
    console.log(window.innerWidth);
    console.log(window.innerHeight);
  }, 250)
); // Will log the window dimensions at most every 250ms

let counter = 0;
const updateState = () => {
  counter++;
};
const debouncedUpdate = debounce(updateState);
debouncedUpdate(); // counter == 1
debouncedUpdate(); // counter == 1
await delay(300); // counter == 1
assertEquals(counter, 1);
debouncedUpdate(); // counter == 2
await delay(300); // counter == 2
assertEquals(counter, 2);