Событие смены мат-слайдера срабатывает слишком часто

Question

Я использую ползунок, чтобы позволить пользователю установить значение.Генератор событий (input) используется для отображения значения «в реальном времени» (пока мышь не нажата).Это работает.В данный момент генератор событий (change) используется для распознавания, когда пользователь выбрал значение (отпущенная мышь).

Первая проблема заключается в том, что событие изменения запускается дважды во время обычного взаимодействия со слайдером:один раз по первому клику на слайдере и второй раз при его отпускании.Я хотел бы, чтобы событие запускалось только после отпускания ползунка, или чтобы была функция, которая может различать два события и действовать только после события отпускания.

Вторая проблема заключается в том, что мне нужно сделатьHTTP-запрос, когда установлено новое значение из ползунка.Я не хочу, чтобы это случалось часто, поэтому я хотел бы иметь своего рода тайм-аут.Я хочу сделать HTTP-запрос только после того, как прошло определенное количество времени и не произошло новое событие изменения.

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

Есть ли какая-либоспособ решить эти проблемы и добиться того, что я хочу?

Answer 1

Это ошибка.См. https://github.com/angular/material2/issues/14363

Обходной путь: используйте событие slideend.

<mat-slider
  #mySlider
  (slideend)="sliderOnChange(mySlider.value)"
></mat-slider>

Это событие "реального" (ожидаемого) "изменения".

ОБНОВЛЕНИЕ: Известная проблема: С помощью (slideend) простой щелчок по линии диапазона ползунка не запускает слайд, пока он никогда не был перетащен.В качестве альтернативы вы можете прослушать событие (mouseup) или (pointerup).Но с указателем и т. Д. Курсор мыши должен находиться внутри компонента.(перекрытие) в противном случае вы должны обработать события отмены указателя....

Я нашел решение для проблемы slideend / pointerup.Просто объедините его с простым обнаружением изменений.

<mat-slider
  #mySlider
  (slideend)="sliderOnChange(mySlider.value)"
  (pointerup)="sliderOnChange(mySlider.value)"
></mat-slider>

sliderOnChange(value: number) {
  if (this.mySliderValue!== value) {
    this.mySliderValue= value;
    console.log('changed: ', value);
  }
}

Вы также можете добавить событие keyup для обработки ввода с клавиатуры.

Answer 2

Вы можете использовать debounceTime , чтобы обеспечить определенную задержку между событиями до запуска HTTP-запроса.

Пример:

@Component({template: `<mat-slider (input)="onSlide($event)"></mat-slider>`})
export class DelayedSliderComponent implements OnInit {
    valueSubject = new BehaviorSubject<number>(0);

    ngOnInit() {
        this.valueSubject.pipe(debounceTime(1000)).subscribe(value => {
            // http request can go here
        });
    }

    onSlide(event: MatSliderChange) {
        this.valueSubject.next(event.value);
    }
}

Вышеуказанный компонентсодержит слайдер, который привязывается к входному событию.Это входное событие срабатывает каждый раз, когда значение изменяется без задержки. valueSubject получает новое значение каждый раз, когда вызывается onSlide , но из-за debounceTime (1000) подписчики будут получать любое новое значение только тогда, когда былоне менее одной полной секунды (или 1000 миллисекунд) с момента последнего изменения значения.