Как подписаться на изменение переменной и выполнить вызов функции один раз для последнего элемента?

Question

[Андрей Харитонов]

В html при клике по div изменяется переменная и каждый раз при изменении вызывается запрос на сервер. Как сделать так чтобы запрос на сервер отправлялся только один раз? Например, кликаю 10 раз - а вызов только один по текущему (последнему) значению. Сейчас вызов на сервер 10 раз, хотя переменная - нужная мне.

html:

<div class="btn btn-mmk-color" 
                          id="next" 
                          mwlCalendarNextView [view]="view" 
                          [(viewDate)]="viewDate"
                          (click)="activeDayisOpenFalse();" 
                    >
                      <i id="next2"   class="fas fa-angle-double-right"></i>
                  </div>

component.ts:

time$ : BehaviorSubject<number> = new BehaviorSubject(0);



activeDayisOpenFalse() {
    console.log('click');
    this.activeDayIsOpen = false;
    
    /*this.getCalendar();
    */
   
    this.time$.next(this.viewDate.getMonth() + 1 );

    this.time$.subscribe(
      (v)=> {console.log(v)} // здесь логи выводятся 10 раз, хочу сюда вызов на сервер поставить
      
    )
}

Comments

[Андрей Харитонов]

в итоге решил через emit.

в компоненте подписка на изменение переменной.

при клике передаю в сервис переменную. там эмитирую. Работает.

Answer 1

[lssssssssssl]

https://www.learnrxjs.io/learn-rxjs/operators/tran...

Если кликаете 10 раз, должно уходить 10 запросов. Вопрос только в том, что, вероятно, первые 9 результатов вам будут уже не нужны. И как раз switchMap в этом поможет.

Но если вам принципиально нужно, чтобы нельзя было 10 раз тыкать, вешайте disabled на кнопку, пока не придёт результат первого клика.

Comments

[Андрей Харитонов]

Это календарь. поэтому тут надо несколько кликов - и сделать запрос на определённый месяц\день - disable не вариант

[Андрей Харитонов]

Если кликаете 10 раз, должно уходить 10 запросов. Вопрос только в том, что, вероятно, первые 9 результатов вам будут уже не нужны. И как раз switchMap в этом поможет.

да именно первые 9 не нужны. Нужен последний.

[eRKa]

lssssssssssl switch отменит запрос, если будет новое событие, но сам запрос будет, посмотрите в консоли. switch нужен, когда есть долгие запросы, а при наступлении нового события, актуальность предыдущего запроса теряется.

Answer 2

[eRKa]

Зависит от того, что такое "последний клик" и как Вы определяете, что он последний. Если имеете в виду, что можно быстро кликнуть несколько раз по элементу и на каждый клик срабатывает отправка, а надо, чтобы только один раз, после "последнего клика в группе быстрых кликов", то для этого есть оператор https://rxjs.dev/api/operators/debounce. Событие пройдет только когда после клика пройдет заданное время. Например, это используется при наборе в поисковой строке: нам не нужен запрос на ввод каждой буквы (а набирают быстро), будет выжидаться пауза между набором символов, как только она появится, произойдет запрос.

Comments

[lssssssssssl]

А вы где-то видели debounce, который ставится на определение "последнего клика" на одну и ту же кнопку?
Мне трудно придумать реальную задачу с пользой от такого действия.

Про набор с клавиатуры - да, про клик мыши - не знаю.

Возможно, такое где-то и применяется повсеместно, но мне как-то сходу не приходит зачем это нужно.

[lssssssssssl]

Хотя, вероятно, дело это уже не моё. Главное, что вопрос решён, и автор доволен :)

[Андрей Харитонов]

я ставлю DebounceTime(), но по истечении времени - всё равно срабатывает 10 раз.

Да, вопрос решён , я очень доволен.

p.s. не знаю как можно было это сделать с switchMap - не разобрался и пошёл другим путём.

Всем спасибо!