Как устранение дребезга, так и регулирование — это методы программирования, используемые для контроля количества запусков конкретной задачи. Например, вы можете решить, когда функция должна вызываться при нажатии кнопки и сколько раз она должна вызываться за заданный интервал времени.

Debouncing и throttling можно легко отличить по деталям их реализации, которые мы собираемся рассмотреть.

устранение дребезга

Очень практичный пример того, где удобна функция устранения дребезга, — функция автозаполнения поиска во внешнем интерфейсе. Если вы хотите искать данные из бэкенда, было бы неразумно обращаться к серверу каждый раз, когда изменяется входное значение. Вы должны как минимум подождать несколько секунд после того, как пользователь перестанет печатать, и отправить запрос на поиск по бэкенд-данным.

Давайте посмотрим, как реализовать очень простую функцию устранения дребезга.

const debounce = (func, delay=100) => {
  let timerID = null;
  
  return function(){
    const context = this;
    const args = arguments;
    
/* Clearing the timeout will cancel the pending executions of                  the callback function  
*/

    if(timerID) {
      clearTimeout(timerID);
    }
/* Setting the timeout will line up a future execution of the callback function wich can be cancelled again when the function get's called before the delay time ellapses
 */
    timerID = setTimeout(() => {
      func.apply(context,args);
    }, delay);
  }
}
// We can debounce our functions like this 
const functionToDebounce = () => console.log('Hello!');
const debouncedFunc = debounce(functionToDebounce,1000);
/* And when we call it multiple times like this, it will always cancel the previous execution whenever it gets recalled in less than the delay time.
*/
debouncedFunc();
debouncedFunc();
debouncedFunc();

Дросселирование

Одним из многих примеров использования регулирования является функция, которая запускается при нажатии кнопки для повторной отправки SMS с подтверждением пользователю.

Зная, что служба SMS, которую вы используете, может быть дорогостоящей, не рекомендуется отправлять SMS каждый раз, когда пользователь нажимает кнопку повторной отправки. Вместо этого вы можете ограничить количество нажатий этой кнопки в течение определенного интервала времени. Скажем, раз в 3 секунды.

Вот как можно реализовать простую функцию дросселирования.

const throttle = (cbFunction,delay=100) => {
  let lastCallTime = 0
  
  return function () {
    const args = arguments
    const context = this;
    const now = new Date()
    
    if(now - lastCallTime >= delay) { /* Call the function after the delay 
*/
      cbFunction.apply(context,args);
      lastCallTime = now; // update the lastCallTime
    }
}
}
// Throttle our function to log hello in the console.
const throttledFunc = throttle(() => console.log('Hello'), 3000);
/* No matter how many times you can call it in 1 milleseconds the function will be called only after 3000 milleseconds have ellapsed */
setInterval(throttledFunc,1)

Теперь, когда мы увидели базовые реализации как устранения дребезга, так и регулирования, я надеюсь, что вы всегда будете помнить об их использовании для создания производительных приложений.

Спасибо за чтение, не стесняйтесь вносить предложения, хлопать в ладоши, делиться с друзьями и подписываться на нас, чтобы получать больше интересных статей.