Angular Mat-Slide-Toggle медленно реагирует

Question

У меня есть простая панель управления, которая имеет элемент управления Angular Mat-Slide-Toggle следующим образом:

<mat-slide-toggle (change)="onQAStateDisplayChanged($event)">Display QA Status</mat-slide-toggle>

Функция, вызываемая для события change, просто запускает событие следующим образом:

@Output() qaStateDisplayChanged: EventEmitter<boolean> = new EventEmitter();
...
onQAStateDisplayChanged(event: MatSlideToggleChange) {
    this.qaStateDisplayChanged.emit(event.checked);
}

Мой компонент контейнера, прослушивая событие, вызывает функцию, выполнение которой занимает несколько секунд. Я надеялся, что при переключении SlideToggle будет происходить событие qaStateDisplayChanged, и SlideToggle будет немедленно скользить по. На самом деле вы нажимаете SlideToggle и ничего визуально не меняется, пока все не завершится через несколько секунд, что не очень удобно для пользователя!

После получения события выполняется серия операций с 3D-моделью с использованием Three. js. Похоже, что браузер не может обновить sh SlideToggle, потому что он интенсивно манипулирует 3D-моделью. Как только модель обновится, браузер сможет обновить пользовательский интерфейс, и SlideToggle переместится по горизонтали.

Кто-нибудь может предложить альтернативный подход, который был бы более адаптивным?

Answer 1

Здесь я вижу две проблемы:

1. Во время тяжелых вычислений пользовательский интерфейс не реагирует. Это просто факт.
2. У Slide Toggle недостаточно времени для изменения интерфейса пользователя.

Я могу предложить обходной путь для второй проблемы. Вы можете отключить анимацию и использовать setTimeout ().

Добавить к своему компоненту:

providers: [
    {provide: ANIMATION_MODULE_TYPE, useValue: 'NoopAnimations'}
]

И использовать что-то вроде

onQAStateDisplayChanged(event: MatSlideToggleChange) {
    setTimeout(() => this.qaStateDisplayChanged.emit(event.checked), 80);
}

Вы можете увидеть полный рабочий пример здесь https://stackblitz.com/edit/angular-qmjfuh