Опять жаргонное слово, но позвольте мне демистифицировать его для вас.

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

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

Давайте посмотрим на приведенный ниже пример,

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Throttling</title>
    </head>
    <body>
        <button class="btn">Click here</button>
        <script src="index.js"></script>
    </body>
</html>
let count = 0;
function submitData(query){
   // some api call
   console.log("result",count++)
}
document.querySelector(".btn").addEventListener("click",()=>{
submitData();
})

В приведенном выше примере, если вы щелкнете 10 раз за 2000 мс, функция будет вызвана 10 раз, как вы можете ясно видеть в приведенном выше примере.

Это очень дорогая операция, и наша задача как разработчиков — максимально удешевить операции.

Давайте посмотрим, как дросселирование помогает нам удешевить эти операции.

function throttle(fn,delay){
  let last = 0;
 /*  
here ...args is optional I've used this in case, if you 
want to pass some parameters you can use ...args
*/ 
  return (...args)=>{
    const now = new Date().getTime();
    if(now - last < delay){
      return;
    }
   last = now;
   return fn(...args)
  }
}
const magicFunction = throttle(submitData,1000);
let count = 0;
function submitData(){
   // some api call
   console.log("result",count++)
}
document.querySelector(".btn").addEventListener("click",magicFunction);

Теперь, если вы щелкнете 10 раз за 2000 мс, функция будет вызываться только 2 раза, как вы можете видеть в коде. Мы заблокировали вызов функции на 1000 мс.

Вот как мы можем реализовать метод регулирования, чтобы повысить производительность нашего приложения

подпишитесь на меня, чтобы узнать больше о подобных сообщениях в блоге.
Дайте мне знать, был ли этот блог полезен.

Твиттер || Линкедин