Задержка вызова функции. Debounce в javascript

Если вкратце, то функция debounce используется для вызова какой-либо функции с задержкой при этом отменяя предыдущий вызов.

Допустим у вас есть поле поиска по сайту, и вам нужно отправлять ajax запросы после введения запроса пользователям, но вы не хотите отправлять запрос на каждый нажатый символ. Вот для этого вы и будете использовать debounce, в которой выставите временной интервал превысив который полетит запрос. К примеру, поставив 1000мс функция будет запускаться только после того, как скорость нажатия превысила 1сек.

Пример кода:

const deBounce = (fn, ms) => {
  let timeoutLink;
  
  return function() {
    const functionCall = () => {
      fn.apply(this, arguments);
    }
    
    clearTimeout(timeoutLink);
    
    timeoutLink = setTimeout(functionCall, ms);
  }
}

Код ниже будет использовать debounce при изменении окна браузера и выводить в консоль его размеры. Задержка в 1секунду не даст вызвать ее несколько раз за одну секунду.

window.addEventListener(
  'resize',
  deBounce(() => {
    console.log(window.innerWidth);
    console.log(window.innerHeight);
  }, 500)
);