Както 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)

Сега, след като видяхме основните реализации както на debouncing, така и на throttling, се надявам, че винаги ще помните да ги използвате за създаване на производителни приложения.

Благодарим ви, че прочетохте, не се колебайте да правите предложения, да ръкопляскате, да споделяте с приятелите си и да ни следвате за още интересни публикации.