After setInterval completion execution not exiting the parent function

Question

By taking response of an API and passing it to another function, using the response ID inside a setInterval for checking the status of an operation for implementing progress bar.

For each time sending the ID by API inside the function returns the status at each instant.

Once the status is "SUCESS" or "Failure" I need to exit the function and perform the next step of operations under the function call it is not happening. If status is "PROGRESS" need the loop to me run for 1 minute and exit.

Here I'm my case I'm using clearInterval if the status is "SUCESS" to break the loop.

Why is is not exiting function after the process is completed?

Is there any alternate way to exit the loop after "SUCESS" or "Failure*"

this.userdat.sendData(data).subscribe((res:any)=>{

      this.checkProgress(res.Id);
      
      //DO THIS  -->Not coming here after exceuction
      
      })

checkProgress(id: any) {
    this.StatFlag = false;
    this.interval = setInterval(() => {
      if (!this.StatFlag) {
      
        this.userdat.operationStatus(id).subscribe((statres: any) => {
          switch (statres.status) {
          
            case "PROGRESS":
              this.stepper.selectedIndex = 1;
              break;
            case "SUCESS":
                this.stepper.selectedIndex = 2;
              this.steppershow = false;
              this.StatFlag = true;
              clearInterval(this.interval)
              break;
            case "FAILED":
              this.steppershow = true;
              clearInterval(this.interval)        
              this.StatFlag = true;
              break;
          }
        });
      }
    }, 50000);

<mat-horizontal-stepper *ngIf="showsteps0" #stepper>
 
 <mat-step label="SUBMITTED" >
 </mat-step>
 <mat-step label=" IN progress" >
 </mat-step>
 <mat-step *ngIf="!steppershow" label="Complteted" >
 </mat-step>
 <mat-step label="Failed" *ngIf="steppershow">
 </mat-step>
 </mat-horizontal-stepper>

I have tried creating a new block after the clearInterval and setting flag for clearInterval it doesn't work as expected.

check it will be coming on next line before response of your api comes in checkprogress method as per your current code. as subscribe to observable is asynchronous. and you are expecting it to be synchronous — Aakash Garg, Oct 03 '21 at 10:22

score 0 · Answer 1 · answered Oct 05 '21 at 07:38

Maybe it a scope issue. In your setInterval, try to redefine the "this".

   this.interval = setInterval(() => {
       this.userdat.operationStatus(id).subscribe((statres: any) => {
          switch (statres.status) {
             const that = this;
             ...
             
             ...   
             that.StatFlag = true;
   }

Rattleback · Answer 2 · 2021-10-26T07:49:22.230

0

After the "SUCESS"/"FAILURE" ,unsubscribe the interval works for me.

this.timeInterval = this.intervalVal.subscribe(() => {

 this.userdat.operationStatus(id).subscribe((statres: any) => {
          switch (statres.status) {
             ...
             ...
             this.timeInterval.unsubscribe()
             break;
             
}

edited Oct 26 '21 at 07:49

answered Oct 26 '21 at 06:47

Rattleback

9
5

After setInterval completion execution not exiting the parent function

2 Answers2