In my code, there is a function that stops a running process using a specified processId. Before this function is executed, there is a single if statement that checks if a valid processId exists, and if so, it calls the cancel() function.
if (this.processId) {
//...
this.processEngine.cancel(this.processId, this.entityUid).subscribe(
...
);
} else {
console.log('No active process to cancel');
}
When initiating the process, a loading screen with a loading animation and a Cancel button is displayed. However, there is a small issue where, under certain conditions (such as throttling via developer tools), the user can click the Cancel button before the processId is initialized, resulting in the process not being cancelled.
There is a Subject in the service that holds the processId value once the process starts successfully and is immediately completed thereafter.
private startSubject = new Subject<string | null>();
...
// inside start function
this.startSubject.next(processId);
this.startSubject.complete();
Additionally, there is a BehaviorSubject that is set to true when the project is started and running.
active: BehaviorSubject<boolean> = new BehaviorSubject(false);
I attempted to modify the existing if statement to include this.active.value, but I am struggling to delay the cancel call until the startSubject is completed. I tried using debounce, but it did not work as expected as the cancel method was called with undefined, resulting in an error.
this.processEngine.cancel(this.processId, this.entityUid).pipe(
debounce(() =>
return this.startSubject.asObservable()
)
)
.subscribe(...);