Может ли кто-нибудь дать мне простое объяснение разницы между дросселированием и дебютом функции для целей ограничения скорости.
Мне кажется, что оба делают то же самое. Я проверил эти два блога, чтобы узнать:
http://remysharp.com/2010/07/21/throttling-function-calls
http://benalman.com/projects/jquery-throttle-debounce-plugin/
Проще говоря:
Вы можете визуально увидеть разницу здесь
Если у вас есть функция, которая вызывается много - например, когда происходит изменение размера или перемещение мыши, ее можно вызывать много раз. Если вы не хотите этого поведения, вы можете Throttle, чтобы функция вызывалась через регулярные интервалы. Debouncing будет означать, что он вызывается в конце (или запуске) нескольких событий.
Лично я нашел debounce сложнее, чем дроссель.
Как обе функции помогают отложить и уменьшить скорость выполнения. Предполагая, что вы вызываете декорированные функции, возвращаемые дросселем /debounce повторно...
Я обнаружил, что последняя часть дебюта имеет решающее значение для понимания цели, которую она пытается достичь. Я также нашел, что старая версия реализации _.debounce помогает понять (любезно https://davidwalsh.name/function-debounce).
// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
_.debounce = function(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
Надуманная метафора, но, возможно, также может помочь.
У вас есть друг по имени Чатти, который любит общаться с вами через IM. Предполагая, что когда она говорит, она отправляет новое сообщение каждые 5 секунд, в то время как значок вашего приложения IM подпрыгивает вверх и вниз, вы можете взять...
Различия
+--------------+-------------------+-------------------+
| | Throttle 1 sec | Debounce 1 sec |
+--------------+-------------------+-------------------+
| Delay | no delay | 1 sec delay |
| | | |
| Emits new if | last was emitted | there is no input |
| | before 1 sec | in last 1 sec |
+--------------+-------------------+-------------------+
Пояснение к случаю использования:
Поиск bar- Не хотите искать каждый раз, когда пользователь нажимает клавишу? Хотите искать, когда пользователь перестал печатать на 1 сек. Используйте debounce 1 сек при нажатии клавиши.
Стрельба game- Пистолет занимает 1 секунду между выстрелами, но пользователь щелкает мышью несколько раз. Используйте throttle по щелчку мыши.
Поменять свои роли:
Регулирование 1 сек на панели поиска - если пользователь вводит abcdefghij с каждым символом в 0.6 sec. Затем душить вызовет сначала a прессе. Он будет игнорировать каждое нажатие в течение следующих 1 секунды, т.е. b при 0,6 секунды будет игнорироваться. Затем c через 1,2 секунды снова сработает, что снова сбрасывает время. Так что d будет проигнорировано и e сработает.
Сбрасывание пистолета на 1 sec- Когда пользователь видит врага, он щелкает мышью, но он не стреляет. Он будет нажимать снова несколько раз в течение этой секунды, но он не будет стрелять. Он увидит, есть ли в нем патроны, в это время (через 1 секунду после последнего щелчка) пистолет автоматически выстрелит.
Регулирование обеспечивает максимальное количество раз, которое функция может быть вызвана в течение долгого времени. Как в "выполнять эту функцию не чаще, чем раз в 100 миллисекунд".
Дебюксинг гарантирует, что функция не будет вызываться снова, пока определенное количество времени не пройдет без ее вызова. Как в "выполнить эту функцию, только если прошло 100 миллисекунд без ее вызова".
Debouncing позволяет вам управлять частотой вызовов, которые может получить функция. Он объединяет несколько вызовов, которые происходят в данной функции, так что повторяющиеся вызовы, которые происходят до истечения определенного времени, игнорируются. В основном debouncing гарантирует, что ровно один сигнал отправляется для события, которое может происходить несколько раз.
Дросселирование ограничивает частоту вызовов, которые функция получает на фиксированный временной интервал. Он используется для обеспечения того, чтобы целевая функция не вызывалась чаще, чем указанная задержка. Дросселирование - это уменьшение скорости повторяющегося события.
В условиях неспециалиста:
Debouncing предотвратит запуск функции, пока она все еще часто вызывается. Функция debounced будет работать только после того, как будет определено, что она больше не вызывается, и в этот момент она будет работать ровно один раз. Практические примеры debouncing:
Автосохранение или проверка содержимого текстового поля, если пользователь "остановил ввод": операция будет выполняться только один раз, ПОСЛЕ того, как было определено, что пользователь больше не печатает (больше не нажимает клавиши).
Ведение журнала, где пользователи оставляют свою мышь: пользователь больше не перемещает свою мышь, поэтому можно записать (последнюю) позицию.
Throttling просто предотвратит запуск функции, если она запущена в последнее время, независимо от частоты вызова. Практические примеры дросселирования:
Дроссель (1 секунда): Здравствуйте, я робот. Пока ты будешь пинговать меня, я буду говорить с тобой, но ровно через 1 секунду. Если вы ответите мне на запрос до истечения секунды, я все равно отвечу вам ровно через 1 секунду. Другими словами, я просто люблю отвечать через определенные промежутки времени.
Дебад (1 секунда): Привет, я тот кузен робота ^^. Пока вы продолжаете пинговать меня, я буду молчать, потому что мне нравится отвечать только через 1 секунду с тех пор, как вы в последний раз пинговали меня. Я не знаю, потому что у меня проблемы с отношением или я просто не люблю перебивать людей. Другими словами, если вы продолжаете запрашивать у меня ответы до истечения 1 секунды с момента вашего последнего вызова, вы никогда не получите ответ. Да, да... давай! называй меня грубым.
Дроссель (10 минут): Я лесозаготовительная машина. Я отправляю системные журналы на наш бэкэнд-сервер через 10 минут.
Дебад (10 секунд): Привет, я не двоюродный брат этой машины. (Не каждый дебоузер связан с троттлером в этом воображаемом мире). Я работаю официантом в соседнем ресторане. Я должен сообщить вам, что, пока вы продолжаете добавлять вещи в свой заказ, я не пойду на кухню для исполнения вашего заказа. Только через 10 секунд после того, как вы в последний раз изменили свой заказ, я буду считать, что вы сделали свой заказ. Только тогда я выполню ваш заказ на кухне.
Прохладные демонстрации: https://css-tricks.com/debouncing-throttling-explained-examples/
Кредиты по аналогии с официантами: https://codeburst.io/throttling-and-debouncing-in-javascript-b01cad5c8edf
Это просто.
Они делают то же самое (ограничение скорости), за исключением того, что во время вызова throttle он будет периодически запускать вашу упакованную функцию, а debounce - нет. Debounce просто (пытается) вызвать вашу функцию один раз в самом конце.
Пример: при прокрутке газ будет медленно вызывать вашу функцию во время прокрутки (каждые X миллисекунд). Debounce будет ждать до тех пор, пока вы не закончите прокрутку, чтобы вызвать вашу функцию.
gttle - это всего лишь оболочка debounce, которая позволяет debounce вызывать пройденный function в некоторый период времени, если debounce задерживает вызов функции в течение периода времени, который больше, чем указано в throtle.
Библиотека lodash предлагает следующую статью https://css-tricks.com/debouncing-throttling-explained-examples/, в которой подробно объясняется разница между Debounce и Throttle и их происхождение
Насколько я понимаю, в простых терминах Throttling - аналогично вызову setInterval (callback) для определенного количества раз, т.е. вызову одной и той же функции определенное количество раз в течение определенного времени при возникновении события и... Debouncing - аналогично вызову setTImeout (callbackForApi) или вызов функции по истечении определенного времени после возникновения события. Эта ссылка может быть helpful- https://css-tricks.com/the-difference-between-throttling-and-debouncing/