Angular Mat-Slide-Toggle 响应缓慢

Question

I have a simple control panel which has an Angular Mat-Slide-Toggle control as follows:

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

The function called on the change event simply fires an event as follows:

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

My container component, listening for the event, calls a function which takes several seconds to complete. I had hoped that on toggling the SlideToggle the qaStateDisplayChanged event would be emitted and the SlideToggle would immediately slide across. What actually happens is you click the SlideToggle and nothing visually changes until everything completes several seconds later, which is not a great user experience!

Following the event being received a series of 3D model operations take place, using Three.js. It appears as if the browser is unable to refresh the SlideToggle because it is intensively manipulating the 3D model. Once the model has updated the browser can update the UI and the SlideToggle slides across.

Can anyone suggest an alternative approach which would be more resonsive?

Answer 1

I see two problems here:

1. During heavy calculations UI is not responsive. It is just a fact.
2. Slide Toggle does not have enough time to change its UI.

I can propose workaround for the second problem. You can disable animation and use setTimeout().

Add to your component:

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

And use something like

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

You can see full working example here https://stackblitz.com/edit/angular-qmjfuh