В чем разница между throttleTime и debounceTime в RxJS и когда выбирать?

Я пытаюсь понять throttleTime vs debounceTime и какой из них использовать, когда?

У меня есть кнопка "за", которая делает запрос API к бэкэнду (который подсчитывает голоса). Пользователь может отправить кнопку несколько раз, но я бы хотел ограничить количество нажатий кнопки в секунду.

Я знаю, что операторы throttleTime и debounceTime могут это делать, но какой из них выбрать?

const upvoteClicks = fromEvent(this.el.nativeElement, 'click')
   .pipe(debounceTime(500))
   .subscribe(() => this.myService.postUpvote(this.postId));

observable rxjs rxjs-pipeable-operators
person Cleave Kokle    schedule 05.06.2019    source источник

Ответы (2)


arrow_upward
29
arrow_downward

Я думаю, что в вашем случае throttleTime работает немного лучше, потому что вы хотите сделать запрос api, как только пользователь нажмет кнопку.

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

Вы можете визуально увидеть это очень хорошо на https://rxmarbles.com введите описание изображения здесь

введите описание изображения здесь

Более того, в статье throttleTime vs debounceTime в RxJS представлен хороший обзор. обоих операторов.

person Harijs Deksnis    schedule 05.06.2019

arrow_upward
3
arrow_downward

(Более простой ответ)

Допустим, пользователь нажимает кнопку, запускающую запрос (пример):

Время дросселирования = может ограничивать количество кликов так, чтобы каждую секунду проходил только 1 (предотвращает рассылку спама по кнопкам)

Debounce time = можно добавить задержку перед выполнением каждого запроса (вы нажимаете кнопку, и в течение 1 секунды ничего не происходит, затем ваш запрос проходит)

1 секунда была просто примером. Вы можете ввести все, что хотите, в debounceTime () или throttleTime () - в мс

person Collin Fox    schedule 25.05.2021
comment
Хотя это правильно, вы объясняете только «когда», а не «что». В примере OP нажатие кнопки представляет собой лайк или голосование. Допустим, пользователь проголосовал за 1-е сообщение и сразу же передумал и проголосовал за 2-й пост / человека / что угодно. Используя throttleTime, вы регистрируете лайк для поста 1, а используя debounceTime, вы регистрируете лайк для поста 2. Ни одна из реализаций не превосходит другую, но это важное различие, о котором следует помнить. - person T_D; 10.06.2021