Опять жаргонное слово, но позвольте мне демистифицировать его для вас.
Это не что иное, как простая техника, которую мы используем, чтобы предотвратить ненужные вызовы функций для повышения производительности приложения.
В отличие от 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 мс.
Вот как мы можем реализовать метод регулирования, чтобы повысить производительность нашего приложения
подпишитесь на меня, чтобы узнать больше о подобных сообщениях в блоге.
Дайте мне знать, был ли этот блог полезен.