Привет 👋 коллеги-элитные разработчики,
Сегодня я поделюсь двумя важными понятиями для оптимизации функций вызовов (или запросов API) в вашем приложении. Эти концепции тоже горячие вопросы интервью, так что вы должны понимать их очень хорошо.
Обе эти концепции используются в разных ситуациях, хотя в этом подходе есть незначительная разница.
❗ Важно, чтобы вы понимали закрытия и settimeout Прежде чем идти дальше.
В конце концов, есть действительно хороший пример, который убедится, что вы никогда не забудете эти концепции. 😉
Дезась
Допустим, у нас есть кнопка на экране, и к нему прикреплен обработчик событий. Когда кнопка нажимается, она вызывает API и получает некоторые данные.
Но есть проблема с этим кодом. Если пользователь неоднократно нажимает кнопку за короткий промежуток времени, мы каждый раз выполняем функцию обработчика. Следовательно, мы называем API несколько раз, и это не оптимально. Что лучше?
Используя Debouncing, мы можем предотвратить ненужные звонки. Debounced Function будет запускать таймер И когда этот таймер истекает, он выполнит функцию. Но если таймер все еще работает, и пользователь снова нажимает кнопку, таймер сбросить Анкет Допустим, наш таймер ждет 1s. Даже если пользователь нажимает несколько раз, функция будет выполнена только 1s после последнего щелчка.
Я сделал общую функцию, которая может отклонить любую функцию ( fn ) Вы предоставляете это. Также требуется дополнительный парам задерживать , если не предоставлено, его значение составляет 300 мс.
Как это работает?
Во -первых, мы завершаем нашу функцию Дебюн и пройти время как 1000 (1s). Это просто означает, что мы хотим, чтобы обработчик событий был выполнен 1s после события. дебайт Функция возвращает функцию, как это необходимо для addEventListener функция Возвращенная функция образует закрытие и имеет доступ к таймер переменная всегда.
Когда пользователь нажимает кнопку, мы проверяем, работает ли существующий таймер, и очищаем это таймер используя ClearTimeout . После этого мы инициируем новый таймер 1S и храним его обратно в таймер . Если пользователь снова нажимает в течение следующих 1S, таймер снова сбрасывается. В противном случае после 1S fn выполнено.
Помимо нормального потока, я также сохранил контекст ( это ) для фн а также принял аргументы, если он получил какие -либо. Это не требуется, чтобы понять, что они дебаруются. Если вы хотите понять методы функции, такие как call () В Apply () и bind () Анкет Вы можете прочитать Эта короткая статья здесь Анкет
⭐ Самым популярным применением дебауна является поля поиска. Например, у вас есть сайт электронной коммерции, на котором пользователь может искать продукты, и вы хотите предоставить им предложения по мере их печати. Без разъяснения, вы будете делать API призыв к каждому персонажу, которого они вводят, так как каждый клавиш – это событие. С дебютом вы можете ограничить это, возможно, 2 или 4 вызовами API (в зависимости от скорости набора текста пользователя). Кроме того, в примере у меня есть Задержка Как 1, но в реальных проектах это намного меньше.
Вы можете попробовать построить свой собственный поле поиска с дебютом сейчас. 😉
Дроссельная
Если вы поняли, что дезась, это будет довольно просто. Этот подход позволяет выполнять функцию после определенных интервалов.
Например, у нас есть та же старая кнопка, но на этот раз она реализована с помощью дроссельная заслонка Функция с Задержка 1 с.
Пользователь неоднократно нажимает на него.
- На первом щелчке, предоставлено
fnназывается. - Для следующих 1 все клики будут игнорированы.
- Любой щелчок после 1S будет принят и
fnбудет вызван снова. - Повторите шаги 2 и 3.
Когда бы вы это использовали?
Хорошим примером является повторное определение размера браузера или отслеживание событий пользователей мышей. Если вы добавите в это, вы получите только один вызов функции, как только пользователь перестанет перемещать свою мышь. Но при дросселировании вы можете получить равномерно распределенные вызовы функций, даже если пользователь продолжает неуклонно перемещать мышь.
Вот реализация:
Так же, как мы это сделали для дебайт , мы завершаем нашу функцию дроссельная заслонка и пройти в задерживать . Это возвращает функцию, которая может быть использована в качестве обработчика событий.
Хитрость состоит в том, чтобы сохранить время, когда функция была выполнена в последний раз. В следующий раз, когда вызовут функцию, мы проверяем, если Задержка время прошло или нет. Если да, мы выполняем фн и обновлено LastExecatedat Для следующего звонка.
Есть альтернативная реализация, используя SetInterval Но этого также достаточно.
Аналогия реального мира между двумя
Допустим, вы стоите перед лифтом. У лифта есть кнопка рядом с ним, чтобы открыть двери. Вы неоднократно нажимаете кнопку. Вы действительно пьяны и провели веселую ночь (до пандемии, конечно). 😛
Предполагая задержку для кнопки как 3s в обоих случаях.
Случай: Дебель Вы нажимали кнопку в течение последних 5 минут, лифт не открывается. Вы сдаетесь, а через 3 года лифт открывается.
Случай: дроссельный Вы нажимали кнопку в течение последних 5 минут, лифт открывается с интервалами 3S. Сначала в 0s, затем 3S, затем 6s и так далее.
👉 Важно отметить, что если вы нажмете кнопку на 4S и 5S, а затем остановитесь, вызов не будет сделана. Вы должны нажать кнопку после 6s, чтобы сделать вызов. В терминах JavaScript вы должны генерировать событие после 6S для выполнения функции. В случае дросселя есть голод.
🙏 Это все для этого. Я надеюсь, что вы получили какое -то представление об этих концепциях и будете использовать их в своих проектах.
Ты можешь пинговать меня на Twitter или LinkedIn , для любых сомнений.
Оригинал: “https://dev.to/thesanjeevsharma/javascript-debouncing-throttling-4aae”