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

лично я часто забываю о концепциях дебауна и дросселирования, поэтому, когда кто -то просит меня объяснить их - или, если в интервью появляется вопрос - я просто моргаю? Чтобы избежать этого, я сделал простую страницу, чтобы помочь освежить мою память. Если вы не хотите чувствовать себя как самозванца?.

]

в приведенном коде я установил задержку на 2 секунды как для дебюра, так и для дросселя. Попробуйте нажать на случайные продукты и приложить паузу.

]

]

]

]

] Индекс

]

]
• аналогия ресторана
• Объяснение
  ]
  • зачем дебайти или дроссель в любом случае?
  • JS обработчик событий
  • В чем дело ?
  • debounce
  ]
  • дроссельная заслонка
  ]
  ]
]

]

ссылка на страницу
]

] ]
] Ссылка GitHub

] Аналогия ресторана

]

представьте, что вы находитесь в ресторане и хотите заказать немного еды, поэтому вы выбираете меню со стола и просто начинаете читать все предметы. (На веб -странице я поделился, нажимать на различные продукты питания будет эквивалентно чтению пункта меню)

]

аналогия здесь

]

? Чтение продукта продукта =? Кнопка нажмите
? ‍? Официант собирается на кухню =? API Call
• ]
]

и представьте, что в ресторане есть три различных типа официантов, которые могут служить вам: ]

]

]

1. ? ] принимает обращение каждый раз, когда вы упоминаете элемент

   бежит на кухню для каждого отдельного элемента
   как JS обрабатывает каждое отдельное событие немедленно
   • ]
   ]
   • ]
   ]
? Debounced Officer

2. ] , когда вы начнете читать меню, он будет ждать, пока вы сделаете паузу как минимум за 2 секунды, прежде чем принимать заказ.

   ]
   как ожидание, пока пользователь закончит ввод, прежде чем сделать вызов API
   ]
   • ]
   ]
? ‍? Официант дросселя

3. ] принимает заказы только один раз каждые 2 секунды

   , если вы упомянули несколько элементов в течение этих 2 секунд, они все пойдут в одном и том же порядке
   как ограничение вызовов API на один раз каждые X секунды, независимо от активности пользователя
   • ]
   ]
   • ]
   ]
   ]
Примечание: основное различие:

]

]

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

Throttling: триггеры через регулярные промежутки времени, независимо от того, когда деятельность останавливается
также 2 сек - это просто то, что я использовал в качестве примера, это может быть любой Tiperiod
• ]
]
• ]
] Объяснение

]

] Зачем все равно дебайти или дроссель?

]

, прежде чем понимать Debounce или дроссель, мы должны знать, почему они даже используются в первую очередь. Чтобы узнать, что давайте поймем поведение обработчиков событий JS

]

] Обработчики мероприятий в JS

]

В JS обработчики событий - это просто функции, которые выполняются, когда возникают конкретные события (такие как клики, печатание или прокрутка).

По умолчанию эти обработчики будут стрелять каждый раз, когда событие происходит

- каждый клавиш, каждый щелчок или движение прокрутки.

] ] // Основной обработчик событий button.addeventListener ('click', function () { console.log ('кнопка нажала!'); }); // Основной обработчик клавиш input.addeventlistener ('keyup', function () { console.log ('клавиша нажала!'); });
]

] В чем дело?

// Basic event handler
button.addEventListener('click', function() {
    console.log('Button clicked!');
});

// Basic keystroke handler
input.addEventListener('keyup', function() {
    console.log('Key pressed!');
});

скажем, например, у вас есть кнопка, которая сделает вызов API

]

function makeApicall () { console.log ("API Call сделан"); } Button.AddeventListener ('click', () => { makeapicall (); });
]

Приведенная выше функция выполнит makeapicall () на каждой кнопке Click (т.е.)

function makeApiCall() {
  console.log("API call made");
}

button.addEventListener('click', () => {
  makeApiCall();
});

Это поведение по умолчанию.

] , но стрельба по вызову API каждый раз для события может быть неэффективным, и в большинстве случаев это не то, что вы ищете. Вот где дроссель и деберуется на картинку. ]

, если вы хотите забрать определение из этой статьи, может быть, это то, что.

дросселирование и дебаунгирование - два наиболее распространенных способа управления частотой ответа слушателя.

] ] Дезась ]

я не собираюсь объяснять код для дебаутирования, так как это может быть просто импортировано из Lodash, скорее мы увидим, где вы можете его использовать.

]

используйте Debouncing, когда вы хотите сделать вызов API, только если пользователь прекратил печатать в течение определенного количества времени или перестал нажимать на определенное количество времени.

]

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

]

, так что здесь происходят две вещи:

] ] пользователь должен перестать нажать.

]

перестать нажимать, по крайней мере, на 2 секунды не должно быть нажатия на кнопку.
]
• ] Дроссельная заслонка
]

дроссель похож на интервал. Используйте это, когда вы не хотите ждать, пока пользователь не остановится, скорее сделайте вызов API в каждом интервале, скажем, 2 секунды

Пример, если пользователь печатает в течение 1 минуты подряд, не приостановив, что на каждые 2 секунды вы бы вызовывали API.

]

] Заключение

]

, как упомянуто в статье, это не для того, чтобы объяснить, как функции работают скорее, чтобы визуализировать и понять, почему они используются. Я наверняка рекомендую вам понять на уровне кода, как они работают, но лично все равно будет использовать Debounce и дроссель, предоставленные Lodash Library, а не для переосмысления колеса.

]

Если вам нравится статья, оставите большие пальцы, это действительно мотивирует меня писать больше. Спасибо ?.

]

]

]