Давайте представим, что вы делаете тест в классе, и каждый раз, когда вы что-то пишете, ваш учитель говорит вам «поторопитесь».
Разве это не раздражает?
Что, если вы хотите ограничить количество раз, когда ваш учитель говорит вам поторопиться, когда вы делаете тест в определенный период времени?
Вот что такое троттлинг.
В javascript в заданный период, независимо от того, сколько раз пользователь инициирует событие, регулируемая функция будет выполняться в течение заданного периода времени.
Что ж… какое значение имеет дросселирование и зачем нам об этом знать?
Потому что регулирование может улучшить производительность нашего веб-приложения, если его правильно понять.
Допустим, у вас есть фрагмент текстового поля, и каждый раз, когда вы что-то печатаете, запускается событие.
Хорошо, 6 событий не испортят производительность приложения, но что, если вы набираете длинный текст? Допустим, этот API получает поле автозаполнения того, что ищет пользователь. Имеет ли смысл запускать этот API автозаполнения, когда пользователь не закончил печатать?
Вот где вступает в действие дросселирование.
При дросселировании мы можем установить вызов автозаполнения не чаще одного раза в 5 или 10 секунд при каждом наборе текста. Предположим, что это время, которое требуется пользователю, чтобы закончить ввод текста. Это сэкономит некоторые избыточные вызовы API для получения автозаполнения.
Другими вариантами использования дросселирования могут быть предотвращение чрезмерных нажатий кнопок для запуска API. Таким образом, пользователи будут ограничены в совершении покупки в течение установленного периода времени, в случае если пользователь случайно совершит покупку более одного раза.
Теперь поговорим о разоблачении. Чем дебаунс отличается от дросселирования?
Debouncing блокирует вызов функции до истечения определенного периода времени.
Возьмем в качестве примера ужин. Представьте, что ваша мама готовит, и вам просто не терпится съесть ее еду (допустим, она хорошо готовит :)), но вы не можете есть, пока она не закончит готовить, что занимает 30 минут.
В этом случае debouncing блокирует вас от приема пищи (вызов функции) до тех пор, пока не пройдет 30 минут.
Легко понять, верно?
Возьмем пример с автозаполнением. Мы можем настроить вызов функции для запуска вызова API автозаполнения только через 30 секунд, когда пользователь начал печатать. Это гарантирует, что API автозаполнения не будет вызываться, когда пользователь все еще печатает.
Хорошо… все это звучит здорово, но где я могу получить доступ к функциям дросселирования и устранения дребезга?
Вы можете заглянуть в lodash.js и импортировать _ из Lodash. Оттуда вы можете ссылаться на функцию debounce/throttle.
Есть два параметра для функции подавления дребезга и дроссельной заслонки:
- функция, которая будет регулироваться/отключаться от дребезга
- количество времени для дросселирования/устранения дребезга в миллисекундах
Вот и все! Теперь не стесняйтесь экспериментировать с регулированием и устранением дребезга, чтобы улучшить свое приложение.
