Статья, рекомендованная в исходниках lodash, чтобы выучить (английский), перевела ее~
Оригинальная ссылка
Автор: ДЭВИД КОРБАЧО
Эта статья написана фронтенд-инженером из Лондона.DAVID CORBACHOтехнические вклады. Мы обсуждали эту тему раньше (о стабилизации и троттлинге), но на этот разDAVID CORBACHOОни становятся ясными и понятными благодаря живым демонстрациям.
Debounceа такжеthrottleДва похожих (но с разными принципами реализации) технических средства, используемых для управления функцией, которая должна выполняться несколько раз в течение определенного периода времени.
Когда наша функция присоединена кdomсобытие, использованиеDebounceа такжеthrottleОчень полезно обращаться с этой функцией. Зачем? Потому что мы добавляем уровень контроля между событием и функцией исполнения. Следует отметить, что это не для контроляdomЧастота, с которой происходит событие.
Давайте рассмотрим пример события свайпа:
Когда мы используем трекпад, колесо прокрутки или перемещаем ползунок, событие может срабатывать только около 30 раз в секунду. Но если мы будем скользить медленнее, он может сработать 100 раз. Принимаете ли вы во внимание эти противоречивые данные при их обработке?
В 2011 году была проблема с Твиттером: когда вы медленно прокручивали страницу вниз, сайт начинал зависать или вообще переставал отвечать.John Resigнаписал в блоге об этой проблемеlearning-from-twitter, он чувствуетscrollПрикрепление сложной функциональной обработки к событиям ужасно.
Решение, данное Джоном, состоит в том, чтобы выполнять цикл каждые 250 миллисекунд после окончания события прокрутки (если вам интересно, вы можете перейти в блог выше, который должен быть прототипом Debounce). Эта обработка мало связана и не мешает работе пользователя.
В настоящее время способ обработки событий намного сложнее, позвольте мне представить вам ниже.Debounce, Throttle, что соответствует некоторым примерам.
Debounce
DebounceОбрабатывайте несколько вызовов группы как один вызов.
Представьте, что вы находитесь в лифте и двери лифта вот-вот закроются В это время кто-то одновременно входит в лифт В это время лифт не начинает подниматься (опускаться), но двери лифта снова открываются . Если люди продолжают входить, лифт будет задерживать свою функцию подъема (или опускания) для достижения цели оптимизации ресурсов.
Вы можете попробовать это сами, нажав или наведя курсор на кнопку.
можно увидетьdebounceОрганизуйте несколько последовательных событий в одно событие.
Передний край (или «немедленный») [первый или немедленный]
Вы можете найти события в стабилизации, ожидающие триггерного события, и после выполнения, пока событие не закончилось, оно было выполнено. Почему бы не приступить к реализации мероприятия, чтобы с тем же эффектом достичь нашего первоначального видения? Но короткое время не может выполняться непрерывно.
Можете посмотреть на это, это "ведущий"debounceпример.
существуетunderscore.js, элемент конфигурации называетсяimmediateвместоleading.
Можешь попробовать:
Реализация отказа
первый раз я увиделdebounceреализуется вJohn Hann（term之父）изблог, это был еще 2009 год. год спустяJeremy Ashkenasдобавил этоunderscore.js.debounceнедавно присоединилсяLodashсередина.
Три реализации несколько отличаются внутри, но их интерфейсы очень похожи.
Было время, когда подчеркивание переняло реализацию debounce/throttle в debounce, пока в 2013 году я не был в_.debounceнайтиbug, и с тех пор их пути разошлись.
LodashДобавлено много функций в_.debounceа также_.throttleсередина. оригинальныйimmediateID заменен наleadingа такжеtrailing. Вы можете настроить один или оба. По умолчаниюtrailing.
В этой статье я не буду обсуждать новые элементы конфигурации.maxWait, хотя я его не обсуждаю, но он очень полезен. Фактическиthrottleреализуется вdebounceиспользуется вmaxWait, ты сможешьздесьВидеть.
Пример отказа
Пример изменения размера
Когда мы настроим окно браузера, оно будет запущеноResizeмероприятие.
Смотри нижеdemo:
Как видите, мыresizeИспользовать конфигурацию по умолчанию в событияхtrailing, потому что мы переходим к последнему значению только после изменения размера окна.
Автоматически отправлять ajax-запрос для ввода с клавиатуры
Что мы делаем, так это отправляем в фоновый режим каждые 50 мс, пока пользователь печатает.ajaxпросить. Используйте это время_.debounceЧтобы помочь нам избежать дополнительных накладных расходов, мы отправляем запрос только после того, как пользователь перестанет печатать.
используется здесьleadingЭто не имеет смысла, нам нужно дождаться, пока пользователь наберет последний символ.
Примером сценария, подобного этому, является выполнение проверки ввода, например, пользователь запрашивает «пароль меньше 6 цифр» при регистрации.
Как использовать дебаунс, дроссель и общие ямы
Многие люди предпочитают писать свои собственныеdebounce/throttleфункция илиctrlC ctrlVКод из чужого блога. Мой совет правильно использоватьunderscoreа такжеLodash.如果你仅仅需要_.debounceа также_.throttleметод, вы можете использоватьlodash-cliСгенерируйте js указанной функции, метод использования следующий: (webpackКогда появится инструмент для упаковки, я не думаю, что нужно рассматривать эту проблему)
npm i -g lodash-cli
lodash include = debounce, throttle
Простой в использовании:
// WRONG
$(window).on('scroll', function() {
_.debounce(doSomething, 300);
});
// RIGHT
$(window).on('scroll', _.debounce(doSomething, 200));
// or
var debounced_version = _.debounce(doSomething, 200);
$(window).on('scroll', debounced_version);
// If you need it
debounced_version.cancel();
Throttle
ThrottleРоль состоит в том, чтобы наша функция выполнялась только один раз за миллисекундный интервал.
Throttleа такжеdebounceОсновное отличие состоит в том, что отслеживаемые события происходят всегда,ThrottleЭто гарантирует, что выполняемая нами функция выполняется хотя бы один раз в течение миллисекундного интервала. Какое-то время это может быть трудно понять, но, прочитав следующий пример, вы, возможно, просветитесь.
Throttling Examples
Неограниченное выпадающее меню
Обычный сценарий, пользователь тянет страницу вниз, нужно следить, насколько пользователь находится снизу, и если близко к низу, отправлятьajaxЗапросите дополнительный контент, прежде чем вставлять его на страницу.
игривыйdebounce在В этом сценарии сделать это невозможно, он сработает только после того, как пользователь остановит действие смахивания. Что нам нужно, так это чтобы пользователь отправил запрос, когда он находится почти в самом низу, когда пользователь может опускать ползунок.
имеютthrottleЧасто мы можем рассчитать расстояние пользователя от дна.
Вывод преднамеренный, если есть какая-то помощь, не стесняйтесь хвалить!